Refactor/sidebar (#1865)

* fixing sidebar css in collapsed state

* button default style, style names standardized

src/frontend/components/UI/Sidebar/index.css

@@ -42,6 +42,15 @@
   transition: color 250ms;
   text-align: start;
   font-family: var(--primary-font-family);
+  border-radius: 0;
+}
+
+.App.collapsed .Sidebar__item {
+  padding: var(--space-xs) 0;
+}
+
+.App.collapsed .Sidebar__itemIcon {
+  margin: 0 auto;
 }
 
 .Sidebar__item:focus-visible {
@@ -69,7 +78,6 @@
   display: inline-flex;
   justify-content: center;
   color: var(--accent);
-  flex-shrink: 0;
 }
 
 .currentDownloads {

src/frontend/styles/_buttons.scss

@@ -1,22 +1,30 @@
+@mixin buttonDefaultStyle {
+  font-family: var(--secondary-font-family);
+  border-radius: var(--space-3xs);
+  color: #161616;
+}
+
+button {
+  @include buttonDefaultStyle();
+}
+
 .button {
+  @include buttonDefaultStyle();
   --line-height: 17px;
   cursor: pointer;
   padding: var(--space-sm);
   background: var(--primary);
   color: #1a1b1c;
   text-transform: uppercase;
-  font-family: var(--secondary-font-family);
   font-style: normal;
   font-weight: var(--medium);
   font-size: var(--text-md);
   line-height: var(--line-height);
-  color: #161616;
   border: none;
   max-height: 40px;
   text-align: center;
   transition: 500ms;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: var(--space-3xs);
 }
 
 .button:disabled {

src/frontend/styles/_typography.scss

@@ -80,10 +80,15 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+.subtitle {
   font-family: var(--primary-font-family);
 }
 
+.content-sm {
+  font-family: var(--secondary-font-family);
+}
+
 .text--6xl {
   font-size: var(--text-6xl);
 }
@@ -119,22 +124,44 @@ h5,
 
 .subtitle,
 .content,
-.uppercase,
 p,
 h6,
-.text--md {
+.text--md,
+button,
+.button-md {
   font-size: var(--text-md);
 }
 
-.content-s,
-.button,
+.content-sm,
+.button-sm,
 .text--sm {
   font-size: var(--text-sm);
 }
 
-.subtitle-s,
+.subtitle-sm,
 .caption,
 .status,
 .text--xs {
   font-size: var(--text-xs);
 }
+
+.subtitle,
+.content-sm,
+h5,
+h4 {
+  font-weight: var(--medium);
+}
+
+.subtitle-sm,
+.button-sm,
+.button-md,
+h3,
+h2,
+h1 {
+  font-weight: var(--bold);
+}
+
+.status,
+h6 {
+  font-weight: var(--semibold);
+}