Various fixes for the design system CSS refactor (#698)

* removing old classes, updating color variables, updating fontawesome, style fix for filters window * updating icons in settings window, updating button styles * continued stylesheet updates, style fixes for transitions and advanced media, table updates,cont button updates * 2 design fixes to onboarding, button width on connect step, widget alignment on select widget step * icon fix for scene transitions, night mode table color fix * test fix for transitions * removing fontawesome svgs, not needed * continued switching helper classes to mixins, commented out twitchalerts css, pulling new shared components into design system * merge with staging * yarn lock * link night mode fix, loader color change * added border color back to active tabs, new icon for maximize screen, test widget button lowercase, move mixer tooltip to left as preview was cutting it off on live page * revert yarn.lock * fix filters test * fix streaming test * removed old fontawesome files, end stream button fix * cleaning up button styles in new widget settings window and code editor * new updater window style, working on windows design updates, removing old colors * add source scroll fix, improved source filters style, several small bug fixes * indentation fix, removed commented out icon * fix tests * icon fixes for chatbox and donation ticker, made avd audio window wider
stream-labs · Aug 7, 2018 · a7d20e1 · a7d20e1
1 parent 6acd6cc
commit a7d20e1
Show file tree

Hide file tree

Showing 52 changed files with 472 additions and 390 deletions.
diff --git a/app/app.less b/app/app.less
@@ -34,17 +34,26 @@ body {
 }
 
 // Type
+h2 {
+  font-family: 'Roboto';
+  font-size: 16px;
+  .weight--medium();
+  text-transform: capitalize;
+  color: @day-title;
+  margin-bottom: 24px;
+}
+
 h3 {
   font-family: 'Roboto';
   font-size: 14px;
   .weight--medium();
+  color: @day-title;
 }
 
 h4 {
   font-family: 'Roboto';
   text-transform: uppercase;
   font-size: 13px;
-  .letter-spacing;
   .weight--medium();
   margin-bottom: 20px;
   color: @day-title;
@@ -213,9 +222,8 @@ a,
   padding: 0px 12px;
   display: flex;
   z-index: 10;
-  .radius;
-  .border;
-  .shadow;
+  .radius();
+  .day-shadow();
 }
 
 .tabs {
@@ -339,12 +347,16 @@ select {
     border: 1px solid transparent;
   }
 
+  h2 {
+    color: @night-title;
+  }
+
   h3 {
-    color: @grey;
+    color: @night-title;
   }
 
   h4 {
-    color: @white;
+    color: @night-title;
   }
 
   label {

diff --git a/app/components/ApiSettings.vue b/app/components/ApiSettings.vue
@@ -7,13 +7,15 @@
     </div>
 
     <div class="section">
-      <ObsTextInput :value="tokenInput">
-        <button
-            class="button button--default button--input"
-            @click="generateToken">
-          Update
-        </button>
-      </ObsTextInput>
+      <div class="section-content">
+        <ObsTextInput :value="tokenInput">
+          <button
+              class="button button--default"
+              @click="generateToken">
+            Update
+          </button>
+        </ObsTextInput>
+      </div>
     </div>
 
 

diff --git a/app/components/AppearanceSettings.vue b/app/components/AppearanceSettings.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="section">
-      <GenericForm v-model="settingsFormData" @input="saveSettings" />
+      <div class="section-content">
+        <GenericForm v-model="settingsFormData" @input="saveSettings" />
+      </div>
     </div>
   </div>
 </template>

diff --git a/app/components/ExperimentalSettings.vue b/app/components/ExperimentalSettings.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="section">
-      <GenericForm v-model="settingsFormData" @input="saveSettings" />
+      <div class="section-content">
+        <GenericForm v-model="settingsFormData" @input="saveSettings" />
+      </div>
     </div>
   </div>
 </template>

diff --git a/app/components/ExtraSettings.vue b/app/components/ExtraSettings.vue
@@ -1,32 +1,39 @@
 <template>
 <div>
   <div class="section">
-    <p>{{ $t('If you are experiencing weird behavior, you can try deleting your cache directory.  This will result in you losing your scene configuration and settings, but can fix some stability issues.')}}</p>
-    <div class="margin-bot--20">
-      <a class="link" @click="showCacheDir">
-        <i class="icon-view" /> <span>{{ $t('Show Cache Directory')}}</span>
-      </a>
-    </div>
-    <div class="margin-bot--20">
-      <a class="link" @click="deleteCacheDir">
-        <i class="icon-trash" /> <span>{{ $t('Delete Cache and Restart') }}</span></a>
-    </div>
-    <div class="margin-bot--20">
-      <a class="link" @click="uploadCacheDir" :disabled="cacheUploading">
-        <i class="fa fa-upload" /> <span>{{ $t('Upload Cache to Developers') }}</span>
-        <i class="fa fa-spinner fa-spin" v-if="cacheUploading" />
-      </a>
+    <div class="section-content">
+      <p>{{ $t('If you are experiencing weird behavior, you can try deleting your cache directory.  This will result in you losing your scene configuration and settings, but can fix some stability issues.')}}</p>
+      <div class="input-container">
+        <a class="link" @click="showCacheDir">
+          <i class="icon-view" /> <span>{{ $t('Show Cache Directory')}}</span>
+        </a>
+      </div>
+      <div class="input-container">
+        <a class="link" @click="deleteCacheDir">
+          <i class="icon-trash" /> <span>{{ $t('Delete Cache and Restart') }}</span></a>
+      </div>
+      <div class="input-container">
+        <a class="link" @click="uploadCacheDir" :disabled="cacheUploading">
+          <i class="fa fa-upload" /> <span>{{ $t('Upload Cache to Developers') }}</span>
+          <i class="fa fa-spinner fa-spin" v-if="cacheUploading" />
+        </a>
+      </div>
     </div>
   </div>
   <div class="section">
-    <ObsBoolInput :value="streamInfoUpdateModel" @input="setStreamInfoUpdate" />
-    <button class="button button--action" @click="restartStreamlabelsSession">
-      {{ $t('Restart Streamlabels Session') }}
-    </button>
-    <br/>
-    <button class="button button--action" @click="runAutoOptimizer" v-if="isTwitch && !isRecordingOrStreaming">
-      {{ $t('Run Auto Optimizer') }}
-    </button>
+    <div class="section-content">
+      <ObsBoolInput :value="streamInfoUpdateModel" @input="setStreamInfoUpdate" />
+      <div class="input-container">
+        <button class="button button--action" @click="restartStreamlabelsSession">
+          {{ $t('Restart Streamlabels Session') }}
+        </button>
+      </div>
+      <div class="input-container" v-if="isTwitch && !isRecordingOrStreaming">
+        <button class="button button--action" @click="runAutoOptimizer">
+          {{ $t('Run Auto Optimizer') }}
+        </button>
+      </div>
+    </div>
   </div>
 </div>
 </template>

diff --git a/app/components/HotkeyGroup.vue b/app/components/HotkeyGroup.vue
@@ -1,20 +1,22 @@
 <template>
 <div class="section">
-  <div class="section-title--dropdown">
-    <h4
-      v-if="title"
-      @click="collapsed = !collapsed">
-      <i
-        v-if="collapsed === true"
-        class="fa fa-plus"/>
-      <i
-        v-if="collapsed === false"
-        class="fa fa-minus"/>
-      {{ title }}
-    </h4>
-  </div>
-  <div v-for="hotkey in hotkeys" :key="hotkey">
-    <hotkey v-show="!collapsed" :hotkey="hotkey" />
+  <h2
+    class="section-title section-title--dropdown"
+    v-if="title"
+    @click="collapsed = !collapsed"
+    :class="{ 'section-title--opened': !collapsed }">
+    <i
+      v-if="collapsed === true"
+      class="fa fa-plus section-title__icon"/>
+    <i
+      v-if="collapsed === false"
+      class="fa fa-minus section-title__icon"/>
+    {{ title }}
+  </h2>
+  <div class="section-content" v-show="!collapsed">
+    <div v-for="hotkey in hotkeys" :key="hotkey">
+      <hotkey :hotkey="hotkey" />
+    </div>
   </div>
 </div>
 </template>

diff --git a/app/components/LanguageSettings.vue b/app/components/LanguageSettings.vue
@@ -1,6 +1,8 @@
 <template>
 <div class="section">
-  <GenericForm :value="settings" @input="save"></GenericForm>
+  <div class="section-content">
+    <GenericForm :value="settings" @input="save"></GenericForm>
+  </div>
 </div>
 </template>
 

diff --git a/app/components/LiveDock.vue b/app/components/LiveDock.vue
@@ -38,14 +38,12 @@
         </div>
         <div class="live-dock-viewer-count">
           <i
-            class="fa fa-eye live-dock-viewer-count-toggle label--icon"
             :class="{
-              'fa-eye': !hideViewerCount,
-              'fa-eye-slash': hideViewerCount
+              'icon-view': !hideViewerCount,
+              'icon-hide': hideViewerCount
             }"
             @click="toggleViewerCount"/>
-          <i class="fa fa-user label--icon" />
-          <span class="weight--medium">{{ viewerCount }}</span> {{ $t('viewers')}}
+          <span class="live-dock-viewer-count__count">{{ viewerCount }}</span><span v-if="viewerCount >= 0">{{ $t('viewers')}}</span>
         </div>
       </div>
 
@@ -55,19 +53,19 @@
             @click="showEditStreamInfo"
             v-if="isTwitch || isMixer || (isYoutube && isStreaming)"
             v-tooltip="editStreamInfoTooltip">
-            <i class="fa fa-pencil" />
+            <i class="icon-edit" />
           </a>
           <a
             @click="openYoutubeStreamUrl"
             v-if="isYoutube && isStreaming"
             v-tooltip="viewStreamTooltip">
-            <i class="fa fa-video-camera" />
+            <i class="icon-studio" />
           </a>
           <a
             @click="openYoutubeControlRoom"
             v-if="isYoutube && isStreaming"
             v-tooltip="controlRoomTooltip">
-            <i class="fa fa-cogs" />
+            <i class="icon-settings" />
           </a>
         </div>
         <a @click="refreshChat" v-if="isTwitch || isMixer || (isYoutube && isStreaming)">{{ $t('Refresh Chat') }}</a>
@@ -77,12 +75,10 @@
         <chat ref="chat" />
       </div>
       <div class="flex flex--center flex--column live-dock-chat--offline" v-else >
-        <img class="flex flex--center flex--column margin-bot--20" src="../../media/images/sleeping-kevin-night.png">
+        <img class="live-dock-chat__img--offline live-dock-chat__img--offline-day" src="../../media/images/sleeping-kevin-day.png">
+        <img class="live-dock-chat__img--offline live-dock-chat__img--offline-night" src="../../media/images/sleeping-kevin-night.png">
         <span>{{ $t('Your chat is currently offline') }}</span>
       </div>
-
-
-
     </div>
   </transition>
 </div>
@@ -99,7 +95,7 @@
   width: 28%;
   border-left: 1px solid @day-border;
   padding: 16px 20px 10px;
-  transition: all 275ms;
+  .transition();
 
   &.live-dock--left {
     border-right: 1px solid @day-border;
@@ -122,13 +118,10 @@
 
 .live-dock-chevron {
   cursor: pointer;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  .absolute(@top: 0, @bottom: 0, @left: 0);
   display: flex;
   align-items: center;
   height: 100%;
-  left: 0px;
   padding-left: 4px;
 
   &:hover {
@@ -174,7 +167,7 @@
 
   .live-dock-platform-tools {
     a {
-      padding: 0 10px;
+      padding: 0 8px;
     }
   }
 
@@ -184,6 +177,13 @@
 }
 
 .live-dock-viewer-count {
+  .flex();
+  .flex--center();
+
+  i {
+    .margin-right();
+  }
+
   .live-dock-viewer-count-toggle {
     opacity: 0;
     cursor: pointer;
@@ -196,33 +196,49 @@
   }
 }
 
+.live-dock-viewer-count__count {
+  padding-right: 3px;
+}
+
 .live-dock-chat {
   flex-grow: 1;
   position: relative;
 }
 
 .live-dock-chat--offline {
   height: 100%;
+}
 
-  img{
-    width: 75%;
-  }
+.live-dock-chat__img--offline {
+  width: 60%;
+  .flex();
+  .flex--center();
+  .flex--column();
+  margin-bottom: 16px;
+}
+
+.live-dock-chat__img--offline-night {
+  display: none;
 }
 
 .live-dock-pulse {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: @red;
-  margin: 0 6px;
+  margin: 0 8px;
   box-shadow: 0 0 0 rgba(252, 62, 63, 0.4);
 
   &.live-dock-offline {
-    background: @grey;
+    background: @icon;
     animation: none;
   }
 }
 
+.live-dock-platform-tools {
+  .flex();
+}
+
 .night-theme {
   .live-dock {
     border-color: @night-border;
@@ -233,5 +249,13 @@
   .live-dock-viewer-count {
     color: @white;
   }
+
+  .live-dock-chat__img--offline-day {
+    display: none;
+  }
+
+  .live-dock-chat__img--offline-night {
+    display: flex;
+  }
 }
 </style>