new theme

resources/sass/main.scss

@@ -4,6 +4,7 @@
 @import './variables.scss';
 @import './mixins.scss';
 @import "../../node_modules/bulma/bulma.sass";
+@import "./overrides.scss";
 // @import '../../node_modules/animate.css/source/_base.css';
 // nav.navbar {
 //   padding-left: 5rem;

resources/sass/overrides.scss

@@ -0,0 +1,197 @@
+// Overrides
+@if $bulmaswatch-import-font {
+  @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
+}
+
+.modal-card-title,
+.subtitle,
+.title,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  font-family: $family-heading;
+}
+
+.button,
+.control.has-icons-left .icon,
+.control.has-icons-right .icon,
+.input,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.select,
+.select select,
+.textarea {
+  height: 2.534em;
+}
+
+.button {
+  transition: all 200ms ease;
+  font-weight: 500;
+  font-family: $family-heading;
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25);
+  }
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 2px rgba($color, 0.25);
+      }
+    }
+  }
+}
+
+.input,
+.textarea {
+  transition: all 200ms ease;
+  box-shadow: none;
+}
+
+.notification {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      a:not(.button) {
+        color: $color-invert;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.card {
+  box-shadow: none;
+  border: 1px solid $grey-lighter;
+  border-radius: $radius;
+
+  .card-image {
+    img {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+
+  .card-header {
+    box-shadow: none;
+    border-bottom: 1px solid $grey-lighter;
+    border-radius: $radius $radius 0 0;
+  }
+}
+
+.card-header-title,
+.menu-label,
+.message-header,
+.panel-heading {
+  font-family: $family-heading;
+  font-weight: normal;
+}
+
+.menu-list a {
+  border-radius: $radius;
+}
+
+.navbar {
+  border-radius: $radius;
+
+  .navbar-item,
+  .navbar-link {
+    font-family: $family-heading;
+    transition: all 300ms;
+  }
+
+  @include touch {
+    .navbar-menu {
+      background-color: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .navbar-dropdown .navbar-item {
+    @include desktop {
+      color: $text;
+    }
+  }
+
+  &.is-transparent {
+    background-color: transparent;
+    .navbar-item,
+    .navbar-link {
+      color: rgba($text, 0.75);
+
+      &.is-active {
+        color: $text;
+      }
+
+      &:after {
+        border-color: inherit;
+      }
+    }
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .navbar-start,
+      .navbar-end {
+        > .navbar-item,
+        .navbar-link {
+          color: rgba($color-invert, 0.75);
+
+          &.is-active {
+            color: $color-invert;
+          }
+        }
+      }
+      @include touch {
+        .navbar-item,
+        .navbar-link {
+          color: rgba($color-invert, 0.75);
+
+          &.is-active {
+            color: $color-invert;
+          }
+        }
+      }
+    }
+  }
+}
+
+.hero {
+  // Colors
+  .navbar {
+    background-color: $primary;
+  }
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .navbar {
+        background: none;
+      }
+    }
+  }
+}
+
+.panel-block.is-active {
+  color: $primary;
+}

resources/sass/variables.scss

@@ -1,11 +1,45 @@
-// Update Bulma's global variables
+////////////////////////////////////////////////
-// $family-sans-serif: "Nunito", sans-serif;
+// MINTY
-// $grey-dark: $brown;
+////////////////////////////////////////////////
-// $grey-light: $beige-light;
+$grey: #888;
-// $primary: $purple;
+$grey-light: #aaa;
-// $primary: #7FD7F5;
+$grey-lighter: #dbdbdb;
-// $link: $pink;
-// $widescreen-enabled: false;
-// $fullhd-enabled: false;
 
-// $navbar-height: 5rem;
+$orange: #eea170;
+$yellow: #ffce67;
+$green: #56cc90;
+$cyan: #6cc3d5;
+$blue: #6d90d6;
+$red: #e07f7d;
+$turquoise: #6abfb0;
+
+$danger: $orange;
+
+$text: darken($grey, 10);
+$subtitle-color: $grey;
+
+$size-1: 2.5rem;
+$size-2: 2rem;
+$size-3: 1.75rem;
+$size-4: 1.5rem;
+$size-5: 1.25rem;
+$size-6: 15px;
+$size-7: 0.75rem;
+
+$radius-small: 4px;
+$radius: 6px;
+$radius-large: 8px;
+
+$family-heading: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont,
+  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+$navbar-background-color: $turquoise;
+$navbar-item-color: rgba(#fff, 0.75);
+$navbar-item-hover-color: #fff;
+$navbar-item-active-color: #fff;
+$navbar-item-hover-background-color: rgba(#000, 0.1);
+$navbar-dropdown-arrow: $navbar-item-color;
+
+$bulmaswatch-import-font: true !default;
+
+$box-shadow: 0 0 0 1px $grey-lighter;

resources/scripts/applications/shared/components/TopNavbar.vue

@@ -11,7 +11,7 @@
     >
       <p>End Call?</p>
     </Modal>
-    <nav class="navbar" role="navigation" aria-label="main navigation">
+    <nav class="navbar is-light" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
         <router-link to="/" class="navbar-item" exact v-if="!inCall">
           <strong>Seepur</strong>

resources/views/components/nav/nav.edge

@@ -1,5 +1,5 @@
 {{ script('scripts/components/navbar/app.bundle.js') }}
-<nav class="{{ isLanding ? 'darken' : '' }} navbar" role="navigation" aria-label="main navigation">
+<nav class="{{ isLanding ? 'darken' : '' }} navbar is-light" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" href="/">
         {{--  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">  --}}
@@ -49,7 +49,7 @@
           @else
           <div class="navbar-item">
             <div class="buttons">
-              <a class="button  is-info is-rounded" href='/register'>
+              <a class="button  is-primary is-rounded" href='/register'>
                 <strong>Sign up</strong>
               </a>
               <a class="button  is-rounded is-outlined" href='/login'>

resources/views/landing.edge

@@ -19,7 +19,7 @@ A safe and fun way to spend time with far away loved ones
               spend time with far away loved ones
             </h2>
             <div class="buttons">
-              <a class="button is-info is-rounded" href="/register">Sign Up</a>
+              <a class="button is-primary is-rounded" href="/register">Sign Up</a>
               <a class="button is-rounded  is-outlined" href='/login'>Log In</a>
             </div>
           </div>

resources/views/layouts/landing.edge

@@ -86,7 +86,7 @@
                 </label>
               </div>
               <div class="control is-inline-block">
-                <button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
+                <button id="btn-register-submit" class="button is-primary is-rounded" disabled="true">Submit</button>
               </div>
 
             </div>

resources/views/login.edge

@@ -48,7 +48,7 @@ Seepur| Login
 
   <div class="field is-grouped">
     <div class="control">
-      <button class="button is-rounded is-info">Submit</button>
+      <button class="button is-rounded is-primary">Submit</button>
     </div>
     <div class="control">
       <a class="button is-rounded is-outlined is-rounded" href='/'>Cancel</a>

resources/views/register.edge

@@ -75,7 +75,7 @@ Seepur| Register
 
   <div class="field is-grouped">
     <div class="control">
-      <button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
+      <button id="btn-register-submit" class="button is-primary is-rounded" disabled="true">Submit</button>
     </div>
     <div class="control">
       <a class="button is-outlined  is-rounded" href='/'>Cancel</a>