DEV Community

Tuan Thanh Tan
Tuan Thanh Tan

Posted on

OSD600 - Release 0.3 - First Pull Request

Introduction

Hello everyone, my name is Dustin. Today I'd like to talk about my experience working with Telescope project.

Progress

As I was going through issues in Telescope project, I found an issue that was not very difficult so that I can get to know the project a bit more and learn something out of it. So I chose to go with this issue, which is about adding border for github avatars.

Looking at the issue and thinking about it, It'd be easy to do as I only had to add a couple lines css code, but no. Because telescope has 2 different theme colors which are dark and light. So I had to add another interface to the PaletteOptions

import * as createPalette from '@material-ui/core/styles/createPalettes';

declare module '@material-ui/core/styles/createPalette' {
  interface PaletteOptions {
    border?: PaletteColorOptions;
  }

  interface Palette {
    border: PaletteColor;
  }
}
Enter fullscreen mode Exit fullscreen mode

So that I could make my own border attribute in createTheme object

for light theme

border: {
      main: 'rgba(27,31,36,0.15)',
    },
Enter fullscreen mode Exit fullscreen mode

for dark theme

border: {
      main: 'rgba(240,246,252,0.1)',
    },
Enter fullscreen mode Exit fullscreen mode

However, there was an embarrassing moment where I didn't notice that github isn't using border: for the border around their avatars but a box-shadow. I literally stoled their color code but it still didn't show as github. It took me a decent amount of time to realize it.

Wrapup

This is a beginner-friendly issue so it's totally easy but gives me a bit more foundation to try something bigger and harder in this project. Of course, this is a very small thing in a humongous project but I got it working and merged into the main branch, I'm very happy for that.

You can find my pr right here

Discussion (0)