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;
}
}
So that I could make my own border attribute in createTheme object
for light theme
border: {
main: 'rgba(27,31,36,0.15)',
},
for dark theme
border: {
main: 'rgba(240,246,252,0.1)',
},
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
Top comments (0)