Refactoring CSS to use SCSS variables

[rishiraj824]

• Look for variables to reuse from variables.scss or add them if something is repetitive
• If possible make use of mixins
• Avoid Inline Styling

[rahulakrishna]

I'll take this up first.

Here's what I'm planning:

• A common.scss file.
• mixins for:
  • padding (in multiples of 4, className="padding-8" and className="padding-left-8 padding-top-16" both should work I think)
  • margin
  • flex (What I'm thinking we should be able to do: className="flex row flex-2 justify-flex-start align-center")
• Create a colors.scss file.

Also, I am also thinking using styled-components alongside SCSS. What do you think?

[rishiraj824]

• colors.scss and padding-{2^x} seems like a great idea.
• For the flex stuff, let's use mixins itself and use semantic CSS. This might just increase the number of classes per element.
  eg.

@mixin overlay{
position:absolute;
left:0;
right:0;
bottom:0
top:0;
background:rgba(0,0,0.5);
width:100%;
height:100vh;
}
@mixin flex{
 display:flex;
}
.modal {
@include overlay
@include flex-row
}

We can definitely use styled-components for inline and improve things like JS conditional based styling like isActive?'color:blue':'color:black' on components