Merge pull request #33 from RitaOak/interface-updatesv3

Interface updatesv3

src/components/dashboard.js

@@ -66,7 +66,6 @@ class OAEDashboard extends PageViewElement {
                     <div class="column">
                       <quick-settings></quick-settings>
                       <info-card></info-card>
-                      <tag-card></tag-card>
                     </div>
                   </div>
                 </div>

src/components/followers.js

@@ -0,0 +1,37 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import sharedStyles from '../../style/app.scss';
+import infoBox from '../../style/info-box.scss';
+
+class followersList extends LitElement {
+  static get styles() {
+    return [sharedStyles, infoBox];
+  }
+
+  render() {
+    return html`
+    <nav class="level followers-top">
+        <div class="level-left">
+            <div class="level-item">
+                <div class="column is-flex news-feed-nav">
+                    <figure class="image avatar-news-feed">
+                        <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
+                    </figure>
+                    <section class=infoBox-followers">
+                        <h4>
+                            <a class="feed-user">Michael Brown</a>
+                        </h4>
+                        <p>
+                            Following since October 2019
+                        </p>
+                    </section>
+                </div>
+            </div>
+        </div>
+        </hr>
+    </nav>
+    `;
+  }
+}
+
+window.customElements.define('followers-list', followersList);

src/components/info-card.js

@@ -1,37 +1,21 @@
 import { html, LitElement } from 'lit-element';
-import homepageStyles from '../../style/homepage.scss';
 import sharedStyles from '../../style/app.scss';
 import infoBox from '../../style/info-box.scss';
+import './followers.js';
 
 class infoCard extends LitElement {
   static get styles() {
-    return [sharedStyles, homepageStyles, infoBox];
+    return [sharedStyles, infoBox];
   }
 
   render() {
     return html`
       <div class="box info">
         <div class="content info-card">
-          <nav class="level news-feed-top">
-            <div class="level-left">
-              <div class="level-item">
-                <div class="column is-flex news-feed-nav">
-                  <figure class="image avatar-news-feed">
-                    <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
-                  </figure>
-                  <section class=infoBox-followers">
-                    <h4>
-                      <a class="feed-user">Michael Brown</a>
-                    </h4>
-                    <p>
-                      Following since October 2019
-                    </p>
-                  </section>
-                </div>
-              </div>
-            </div>
-            </hr>
-          </nav>
+          <followers-list></followers-list>
+          <followers-list></followers-list>
+          <followers-list></followers-list>
+          <followers-list></followers-list>
         </div>
       </div>
     `;

src/components/library-table.js

@@ -13,16 +13,13 @@ class libraryTable extends LitElement {
     return html`
     <div class="columns is-flex table-wrap">
         <div class="library-box library-content library-padding ">
-            <table class="table is-fullwidth">
+            <table class="table is-fullwidth lib-table">
                 <thead>
                 <tr class="library-columns library-top">
                     <th>
-                    <label class="checkbox checkbox-label is-inline-flex library-top">
-                        <input type="checkbox" class="checkmark"/>
-                            <p class="library-checkbox-label-top">
-                                Select All
-                            </p>
-                    </label>
+                        <label for="checkbox">
+                        <input type="checkbox">
+                        </label>
                     </th>
                     <th>
                         <p>
@@ -190,6 +187,54 @@ class libraryTable extends LitElement {
          </td>
      </tr>
 </tbody>
+<tbody class="library-section">
+                    <tr class="library-designation-label is-size-6">
+                        <th>
+                            <div class="field">
+                                <p class="control">
+                                    <div class="b-checkbox">
+                                        <label for="checkbox">
+                                        <input type="checkbox">
+                                        </label>
+                                    </div>
+                                </p>
+                            </div>
+                        </th>
+                        <td>
+                            <p class="has-text-weight-bold">
+                                Advertisement
+                            </p>
+                        <!-- Main container -->
+                            <section class="level library-designation-wrap is-inline-flex">
+                                <!-- Left side -->
+                                <div class="level-left">
+                                    <div class="level-item">
+                                        <p class="library-designation-hover">
+                                            Group - Marketing 
+                                        </p<
+                                    </div>
+                                    <div class="level-item library-designation-tag">
+                                    </div>
+                                </div>
+                            </section>
+                        </td>
+                        <td>
+                            <p class="has-text-weight-medium">
+                                Michael Brown
+                            </p>
+                        </td>
+                        <td>
+                            <p class="has-text-weight-medium">
+                                27/03/2020
+                            </p>
+                        </td>
+                        <td>
+                            <p class="has-text-weight-medium">
+                                Folder
+                            </p>
+                        </td>
+                    </tr>
+     </tbody>   
 <tbody class="library-section">
      <tr class="library-designation-label is-size-6">
          <th>

src/components/quick-settings.js

@@ -1,24 +1,34 @@
 import { html, LitElement } from 'lit-element';
-import homepageStyles from '../../style/homepage.scss';
+import '@polymer/iron-icons/iron-icons.js';
+import calendarStyles from '../../style/calendar.scss';
 import sharedStyles from '../../style/app.scss';
 
 class quickSettings extends LitElement {
   static get styles() {
-    return [sharedStyles, homepageStyles];
+    return [sharedStyles, calendarStyles];
   }
 
   render() {
     return html`
-      <div class="box info">
+      <div class="box info calendar-card">
         <article class="media">
           <div class="media-content">
             <div class="content info-card">
-              <p>
-                LAST SIGN IN
-              </p>
-              <h3>
-                <strong>TUESDAY APRIL 4 2019</strong>
-              </h3>
+              <nav class="level">
+                <div class="level-left calendar">
+                  <div class="level-item">
+                    <span class="card-icon">
+                      <iron-icon icon="icons:today"></iron-icon>
+                    </span>
+                  </div>
+                  <div class="level-item calendar-p">
+                    <p>Last Sign In</p>
+                  </div>
+                  <div class="level-item calendar-date">
+                    <p>Thursday 4 April 2019</p>
+                  </div>
+                </div>
+              </nav>
             </div>
           </div>
         </article>

style/calendar.scss

@@ -0,0 +1,19 @@
+.calendar-p {
+  color: white;
+  font-size: 0.9em;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.calendar-date {
+  color: white;
+  font-size: 0.9em;
+  text-transform: uppercase;
+}
+.card-icon {
+  color: white;
+}
+
+.calendar-card {
+  background-color: #424242;
+}

style/homepage-navv2.scss

@@ -1,5 +1,5 @@
 .navbar-brand {
-	padding-left: 2em;
+	padding-left: 5em;
 }
 
 .navbar-item img {
@@ -11,33 +11,19 @@
 }
 
 .signIn-button {
+	text-transform: uppercase;
+	font-size: 0.9em;
 	border-radius: 25px;
-	width: 100px;
-	height: 28px;
-	color: #0260ff;
-	background-color: #e5efff;
+	color: #00253D;
+	background-color: white;
 	border: none;
-	transition: 0.8s;
-	-webkit-transition: 0.8s;
-	-moz-transition: 0.8s;
-	-ms-transition: 0.8s;
-	-o-transition: 0.8s;
 	&:hover {
-		color: white;
-		background-color: #2128bd;
-		transition: 0.8s;
-		-webkit-transition: 0.8s;
-		-moz-transition: 0.8s;
-		-ms-transition: 0.8s;
-		-o-transition: 0.8s;
-		-webkit-transform: rotate(10deg);
-		-moz-transform: rotate(10deg);
-		-o-transform: rotate(10deg);
-		-ms-transform: rotate(10deg);
-		transform: rotate(10deg);
+		color: #2E98D5;
+		background-color: transparent;
+		border: none;
 	}
 }
 
 .navEnd {
-	padding-right: 2em;
+	padding-right: 5em;
 }

style/homepage-search.scss

@@ -7,7 +7,7 @@
 	border-style: solid;
 	border-color: white;
 	background-color: white;
-	border-width: 1px;
+	border-width: 0.2px;
 	&:hover, :active {
 		border-style: solid;
 		border-color: white;
@@ -19,7 +19,7 @@
 .input:focus {
 	border-style: solid;
 	border-color: white;
-	border-width: 1px;
+	border-width: 0.75px;
 	background-color: white;
 }
 

style/homepage-v2.scss

@@ -7,7 +7,7 @@ $secondaryFontColor: #424242;
 @import url("https://fonts.googleapis.com/css?family=Roboto:700&display=swap");
 
 .is-gapless {
-	background: url("/images/background.jpg") no-repeat center fixed;
+	background: url("/images/home-back3.jpg") no-repeat center fixed;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
@@ -16,7 +16,7 @@ $secondaryFontColor: #424242;
 
 .home-rightv2 {
 	transform: translate(0, 60%);
-	margin-left: 2em;
+	margin-left: 5em;
 }
 
 .home-leftCol {
@@ -32,9 +32,10 @@ $secondaryFontColor: #424242;
 }
 
 .home-titlev2 {
-	font-weight: 700;
+	font-weight: 600;
+	margin-top: 1em;
 	text-transform: uppercase;
-	font-size: 2.3em;
+	font-size: 2em;
 	margin-bottom: 0.2em;
 	color: white;
 }

style/info-box.scss

@@ -3,6 +3,12 @@
   margin: 0;
 }
 
+.info {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
 * {
   font-size: 13px;
 }
@@ -19,5 +25,9 @@
 }
 
 .info-box p {
-	color: #BDBDBD;
+	color: rgb(216, 197, 197);
 }
+
+.level.followers-top {
+  margin-bottom: 0;
+}

style/landing-page.scss

@@ -11,6 +11,7 @@ $secondaryFontColor: #424242;
 	font-size: 3em;
 	margin-bottom: 0.2em;
 	color: white;
+	margin-top: 3em;
 }
 
 .home-right h6 {
@@ -36,7 +37,7 @@ $secondaryFontColor: #424242;
 	min-height: 700px;
 	margin-top: 0;
 	margin-bottom: 0;
-	background: url("/images/background_02.jpg") no-repeat center fixed;
+	background: url("/images/home-back3.jpg") no-repeat center fixed;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;

style/library-table-entries.scss

@@ -41,7 +41,7 @@ tr:nth-child(even) {
 	color: #666666;
 }
 .library-padding {
-	padding: 15px;
+	padding: 5px, 15px, 15px, 50px;
 }
 
 .library-designation-wrap {