Some updates

src/assets/scss/_vars.scss

@@ -3,12 +3,12 @@ $color-black: #070707 !default;
 $color-green: #6f6 !default;
 
 $page-width: 99% !default;
-$team-column-width: 350px !default;
+$team-column-width: 280px !default;
 
 $skeleton-cell-color: #121212;
 $skeleton-placeholder-color: darken($color-white, 80);
 $skeleton-highlight-color: darken($color-white, 70);
-$skeleton-border-radius: 2px;
+$skeleton-border-radius: 4px;
 
 $status-up: #6f6;
 $status-mumble: #8a2be2;

src/components/App.module.scss

@@ -3,6 +3,5 @@
 .root {
   display: flex;
   flex-direction: column;
-  align-content: center;
-  align-items: center;
+  max-width: 100%;
 }

src/components/Board/Board.module.scss

@@ -2,5 +2,5 @@
 
 .board {
   margin-bottom: 100px;
-  width: $page-width;
+  //width: $page-width;
 }

src/components/Board/CommandRow/CommandRow.module.scss

@@ -1,12 +1,12 @@
-@import 'src/assets/scss/vars';
+@import 'src/assets/scss/_vars';
 
 .commandRow {
   background-color: rgba(255, 255, 255, 0.02);
   border: 2px $color-white solid;
   border-bottom: 0;
   box-sizing: border-box;
   display: flex;
-  flex-direction: row;
+  //flex-direction: row;
   height: 100px;
   padding: 5px;
   width: 100%;
@@ -17,8 +17,9 @@
 }
 
 .commandServices {
-  align-content: center;
+  justify-content: space-between;
+  width: calc(100% - #{$team-column-width});
   display: flex;
-  flex-grow: 2;
-  justify-content: center;
+  //flex-grow: 1;
+  //overflow: hidden;
 }

src/components/Board/CommandRow/InfoCell/InfoCell.module.scss

@@ -3,17 +3,25 @@
 .cell {
   border-right: 2px solid $color-white;
   display: flex;
+  position: relative;
   flex-direction: row;
   box-sizing: border-box;
   min-width: $team-column-width;
   padding: 15px;
+  padding-left: 8px;
 
   span {
     align-items: center;
     display: flex;
   }
 }
 
+.deltas {
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+}
+
 .logo {
   display: flex;
   height: 58px;

src/components/Board/CommandRow/InfoCell/InfoCell.tsx

@@ -47,6 +47,18 @@ const InfoCell = (props: IProps) => {
           >
             {commandData ? commandData.name : <SkeletonText width={100} />}
           </p>
+        </div>
+        <div className={styles.commandStatsBlock}>
+          <span>{flagPoints ? flagPoints : <SkeletonText width={30} />}</span>
+          <span>
+            {commandData && commandData.totalSLA ? (
+              `${commandData.totalSLA}%`
+            ) : (
+              <SkeletonText width={30} />
+            )}
+          </span>
+        </div>
+        <div className={styles.deltas}>
           {commandData?.bias ? (
             <Arrow
               direction={commandData?.bias > 0 ? 'UP' : 'DOWN'}
@@ -59,16 +71,6 @@ const InfoCell = (props: IProps) => {
             />
           ) : null}
         </div>
-        <div className={styles.commandStatsBlock}>
-          <span>{flagPoints ? flagPoints : <SkeletonText width={30} />}</span>
-          <span>
-            {commandData && commandData.totalSLA ? (
-              `${commandData.totalSLA}%`
-            ) : (
-              <SkeletonText width={30} />
-            )}
-          </span>
-        </div>
       </div>
     </div>
   )

src/components/Board/CommandRow/ServiceCell/ServiceCell.module.scss

@@ -1,9 +1,9 @@
 @import 'src/assets/scss/vars';
 
 .cell {
+  display: flex;
   color: $color-black;
   position: relative;
-  display: flex;
   flex-direction: column;
   flex-grow: 1;
   flex-basis: 100%;

src/components/Board/CommandRow/ServiceCell/ServiceCell.tsx

@@ -43,6 +43,7 @@ const ServiceCell = (props: IProps) => {
       >
         Firstblood!
       </div>
+
       <div className={styles.topInfo}>
         <span className={styles.serviceFp}>
           {serviceData ? (
@@ -53,6 +54,7 @@ const ServiceCell = (props: IProps) => {
         </span>
         <Flags serviceData={serviceData} totalFlags={totalFlags} />
       </div>
+
       <div className={styles.bottomInfo}>
         <span className={styles.serviceSla}>
           {serviceData ? (

src/components/Header/Header.module.scss

@@ -1,4 +1,4 @@
-@import 'src/assets/scss/vars';
+@import 'src/assets/scss/_vars';
 
 header {
   display: flex;
@@ -25,23 +25,25 @@ header {
 }
 
 .serviceList {
-  margin-top: auto;
   display: flex;
+  width: calc(100% - #{$team-column-width});
+  margin-top: auto;
   flex-grow: 1;
   padding-right: 4px;
-  align-items: flex-end;
+  //align-items: flex-end;
+  justify-content: space-around;
 }
 
 .serviceName {
   display: flex;
   box-sizing: border-box;
   margin-bottom: 5px;
   padding-left: 5px;
-  flex-basis: 100%;
+  //flex-basis: 100%;
   font-weight: bold;
   text-transform: uppercase;
-  justify-content: flex-start;
-  border-left: 2px solid $color-white;
+  justify-content: space-between;
+  //border-left: 2px solid $color-white;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/Settings/Settings.module.scss

@@ -3,7 +3,7 @@
 $margin: calc((100% - #{$page-width}) / 2);
 
 .settings {
-  position: absolute;
+  position: fixed;
   right: $margin;
   top: $margin;
   display: flex;

src/index.module.scss

@@ -8,5 +8,4 @@ body {
     'Helvetica Neue', sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  margin: 0;
 }