From 877ac0be2ed744425844bbe436acb840ec9739bc Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sun, 9 Sep 2018 20:52:18 -0400
Subject: [PATCH] harmonization of scss

---
 angular.json                                  |  3 +-
 .../left-side-bar.component.html              | 17 ++--
 .../left-side-bar.component.scss              | 79 +++++++------------
 src/sass/_variables.scss                      |  4 +
 4 files changed, 40 insertions(+), 63 deletions(-)

diff --git a/angular.json b/angular.json
index 5978d22a..107ca295 100644
--- a/angular.json
+++ b/angular.json
@@ -26,7 +26,8 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "./node_modules/bootstrap/scss"
+                "./src/sass",
+                "./node_modules/bootstrap/scss"                
               ]
             },
             "scripts": [
diff --git a/src/app/components/left-side-bar/left-side-bar.component.html b/src/app/components/left-side-bar/left-side-bar.component.html
index 6d61b24b..9f4ff6c0 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.html
+++ b/src/app/components/left-side-bar/left-side-bar.component.html
@@ -1,6 +1,6 @@
-<div id="mam-left-bar">
-    <div id="mam-create-toot">
-        <a href title="write toot!" (click)="createNewToot()">Toot!</a>
+<div class="left-bar" >
+    <div id="create-toot">
+        <a class="create-toot__link left-bar-link" href title="write toot!" (click)="createNewToot()">Toot!</a>
     </div>
 
     <div *ngFor="let account of accounts">
@@ -10,14 +10,7 @@
         <!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
     </div>
 
-
-
-    <div id="mam-account-add">
-        <a href title="add new account" [routerLink]="['/register']">+</a>
+    <div class="add-account">
+        <a class="add-account__link  left-bar-link" href title="add new account" [routerLink]="['/register']">+</a>
     </div>
-
-
-
-
-
 </div>
\ No newline at end of file
diff --git a/src/app/components/left-side-bar/left-side-bar.component.scss b/src/app/components/left-side-bar/left-side-bar.component.scss
index 5083f67d..165f5896 100644
--- a/src/app/components/left-side-bar/left-side-bar.component.scss
+++ b/src/app/components/left-side-bar/left-side-bar.component.scss
@@ -1,55 +1,34 @@
-#mam-left-bar {
-  width: 50px;
-  height: calc(100%);
-  background: green;
-  background: #090b10;
-
-  /*outline: 1px dotted red;*/
+@import "variables";
+.left-bar {
+    width: 50px;
+    height: calc(100%);
+    background: $color-secondary;
 }
 
-#mam-create-toot {
-  width: 50px;
-
-  /* background-color: black; */
+.create-toot {
+    width: 50px;
+    &__link {
+        font-size: 0.8em;
+        margin: 0 0 0 10px;
+    }
 }
 
-  #mam-create-toot a {
-    font-size: 0.8em;
-    /* color: white; */
+.add-account {
+    width: 50px;
+    height: 30px;
+    padding-top: 7px;
+    &__link {
+        font-size: 2em;
+        height: 10px;
+        margin: 0 15px;
+        line-height: 0;
+    }
+}
+
+.left-bar-link {
+    color: $font-link-primary;
     text-decoration: none;
-    margin: 0 0 0 10px;
-  }
-
-
-.mam-account-selector {
-  width: 50px;
-  padding-top: 4px;
-}
-
-  .mam-account-selector a {
-    margin-left: 4px;
-    /*margin-top: 4px;*/
-  }
-
-  .mam-account-selector img {
-    width: 40px;
-    border-radius: 50%;
-  }
-
-#mam-account-add {
-  width: 50px;
-  /*height: 50px;*/
-
-  /* background-color: black; */
-}
-
-a {
-  font-size: 2em;
-  color: #595c67;
-  text-decoration: none;
-  margin: 10px 0 0 15px;
-}
-
-a:hover {
-  color: #8f93a2;
-}
+    &:hover {
+        color: $font-link-primary-hover;
+    }
+}
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 4c677a25..d40ae5bd 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,5 +1,9 @@
 $font-color-primary: #e8eaf3;
 
+$font-link-primary: #595c67;
+$font-link-primary-hover: #8f93a2;
+
 $color-primary: #141824;
+$color-secondary: #090b10;
 
 $default-font-size: 15px;
\ No newline at end of file