Start improving cobalt theme, refactor css

app/gabsocial/actions/settings.js

@@ -20,7 +20,7 @@ const defaultSettings = ImmutableMap({
   boostModal: false,
   deleteModal: true,
   defaultPrivacy: 'public',
-  theme: 'lime',
+  theme: 'cobalt',
   // locale: navigator.language.slice(0, 2) || 'en', // FIXME: Dynamic locales
   locale: 'en',
 

app/gabsocial/components/icon.js

@@ -16,7 +16,7 @@ export default class Icon extends React.PureComponent {
     // tag. There is a common adblocker rule which hides elements with
     // alt='retweet' unless the domain is twitter.com. This should
     // change what screenreaders call it as well.
-    var alt_id = (id === 'retweet') ? 'repost' : id;
+    const alt_id = (id === 'retweet') ? 'repost' : id;
     return (
       <i role='img' alt={alt_id} className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
     );

app/gabsocial/features/ui/components/tabs_bar.js

@@ -12,6 +12,7 @@ import Avatar from '../../../components/avatar';
 import ActionBar from 'gabsocial/features/compose/components/action_bar';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
+import Icon from '../../../components/icon';
 
 @withRouter
 class TabsBar extends React.PureComponent {
@@ -71,20 +72,20 @@ class TabsBar extends React.PureComponent {
     }
     links.push(
       <NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home'>
-        <i className='tabs-bar__link__icon home' />
+        <Icon id='home' />
         <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
       </NavLink>);
     if (account) {
       links.push(
         <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
-          <i className='tabs-bar__link__icon notifications' />
+          <Icon id='bell' />
           <NotificationsCounterIcon />
           <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
         </NavLink>);
     }
     links.push(
       <NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
-        <i className='tabs-bar__link__icon tabs-bar__link__icon--search' />
+        <Icon id='search' />
         <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
       </NavLink>
     );

app/styles/cobalt.scss

@@ -1,12 +1,14 @@
 @import 'gabsocial-light/variables';
 
-$gab-brand-default: #1e00ff;
+// $gab-brand-default: lighten(#149dfb, 10%);
-$gab-background-base-light: #f4f7ff;
+$gab-brand-default: #0482d8;
+$gab-background-base-light: #f2f3f6;
 $gab-background: $gab-background-base-light;
-$ui-base-color: #f4f7ff;
+$ui-base-color: #d9eaf9;
 $ui-highlight-color: $gab-brand-default;
-$nav-ui-highlight-color: #818dff;
+// $nav-ui-background-color: #000;
-$ui-base-lighter-color: darken(#818dff, 35%);
+$nav-ui-highlight-color: #149dfb;
+$ui-base-lighter-color: #b0c0cf;
 
 @import 'application';
 @import 'gabsocial-light/diff';
@@ -14,3 +16,72 @@ $ui-base-lighter-color: darken(#818dff, 35%);
 .floating-action-button {
   filter: hue-rotate(-48deg);
 }
+
+.tabs-bar__link {
+  font-weight: bold;
+  transition: 0.1s;
+  outline: none;
+
+  // &.active {
+  //   color: darken(#04d8c4, 40%);
+  // }
+  //
+  // &:hover {
+  //   color: darken(#04d8c4, 60%);
+  // }
+
+  &::before {
+    // background-color: darken($nav-ui-highlight-color, 10%);
+    bottom: auto;
+    opacity: 0;
+    height: 15px;
+    border-radius: 999px;
+    z-index: -1;
+    width: calc(100% + 20px);
+    margin-left: -12px;
+
+    @media screen and (max-width: 895px) {
+      height: 0;
+      border-radius: 3px 3px 0 0;
+      bottom: 0;
+    }
+  }
+
+  &.active::before,
+  &:hover::before {
+    height: 30px;
+    opacity: 1;
+
+    @media screen and (max-width: 895px) {
+      height: 7px;
+      width: 36px;
+      margin: 0;
+    }
+  }
+
+}
+
+.tabs-bar__split--left:hover .tabs-bar__link {
+  &::before {
+    height: 15px;
+    opacity: 0;
+
+    @media screen and (max-width: 895px) {
+      height: 0;
+    }
+  }
+
+  &:hover::before {
+    height: 30px;
+    opacity: 1;
+
+    @media screen and (max-width: 895px) {
+      height: 7px;
+    }
+  }
+}
+
+.search__input {
+  border-radius: 999px;
+  border: 0;
+}

app/styles/gabsocial/about.scss

@@ -746,6 +746,7 @@ $small-breakpoint: 960px;
 
     .brand {
       margin-right: auto !important;
+      line-height: normal;
     }
 
     img {

app/styles/gabsocial/components/tabs-bar.scss

@@ -1,7 +1,9 @@
+$nav-ui-background-color: $gab-brand-default !default;
+
 .tabs-bar {
   display: flex;
   box-sizing: border-box;
-	background: $gab-brand-default;
+  background: $nav-ui-background-color;
   flex: 0 0 auto;
   overflow-y: auto;
   height: 50px;
@@ -124,11 +126,13 @@
     background-size: 161px 152px;
     background-position: 18px 2px;
     transition: background-color 0.2s;
+
     &:hover {
       background-color: darken($nav-ui-highlight-color, 10%) !important;
       background-position: 18px -98px;
-			box-shadow: inset 0px 0px 6px darken($gab-brand-default, 10%);
+      box-shadow: inset 0 0 6px darken($gab-brand-default, 10%);
     }
+
     span {display: none;}
   }
 
@@ -147,9 +151,11 @@
   display: flex;
   flex: 1 1 auto;
   margin: 0 20px 0 0;
-	color: white;
+  color: #fff;
   text-decoration: none;
   position: relative;
+  align-items: center;
+  padding-right: 4px;
 
   @media screen and (max-width: 895px) {
     width: 36px;
@@ -171,39 +177,21 @@
     }
   }
 
-	&__icon {
+  i.fa {
-		width: 20px;
+    font-size: 14px;
-		background-repeat: no-repeat;
+    transform: translate(-1px, -1px);
-		background-image: url('../images/sprite-main-navigation-links.png');
+    transition: 0.1s;
-		background-size: auto 84px;
 
     @media screen and (max-width: 895px) {
-			width: 32px;
+      font-size: 20px;
-			background-size: auto 120px;
     }
 
-		&.home {
+    &.fa-home {
-			background-position: 0 18px;
+      font-size: 18px;
+      transform: translate(-1px , -2px);
+
       @media screen and (max-width: 895px) {
-				background-position: 4px 11px;
+        font-size: 26px;
-			}
-		}
-		&.notifications {
-			background-position: -137px 18px;
-			@media screen and (max-width: 895px) {
-				background-position: -192px 11px;
-			}
-		}
-		&.groups {
-			background-position: -280px 18px;
-			@media screen and (max-width: 895px) {
-				background-position: -397px 11px;
-			}
-		}
-		&.tabs-bar__link__icon--search {
-			background-position: -697px 18px;
-			@media screen and (max-width: 895px) {
-				background-position: -992px 11px;
       }
     }
   }
@@ -232,23 +220,24 @@
   &:hover::before {
     height: 7px;
   }
+
   &--logo {
     display: block;
     width: 80px;
     height: 50px;
     margin-right: 30px;
-		border: none;
+    border: 0;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% calc(100% - 25px);
     filter: brightness(0%) grayscale(100%) invert(100%);
     & span {display: none !important;}
+
     &:hover {
-			border: none !important;
+      border: 0 !important;
+    }
   }
 
-
-	}
   &--no-highlight,
   &--no-highlight:hover,
   &--no-highlight.active,
@@ -258,3 +247,13 @@
     border-bottom-color: transparent !important;
   }
 }
+
+.tabs-bar__split--left:hover .tabs-bar__link {
+  &::before {
+    height: 0;
+  }
+
+  &:hover::before {
+    height: 7px;
+  }
+}

app/styles/gabsocial/forms.scss

@@ -930,10 +930,14 @@ code {
 
 .captcha {
   background-color: #ffffff;
-  border-radius: 10px;
+  border-radius: 4px;
 
   img {
     display: table;
     margin: 0 auto;
   }
+
+  input[type="text"] {
+    border-radius: 0 0 4px 4px;
+  }
 }

static/index.html

@@ -9,7 +9,7 @@
     <script src="/packs/js/common.js"></script>
     <script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></script>
     <script src="/packs/js/application.chunk.js"></script>
-    <link rel="stylesheet" href="/packs/css/lime.chunk.css" data-react-helmet="true">
+    <link rel="stylesheet" href="/packs/css/cobalt.chunk.css" data-react-helmet="true">
   </head>
   <body class="app-body">
     <noscript>To use Soapbox, please enable JavaScript.</noscript>