feat: welcome page styling improvements

pigmentapp · Jun 7, 2019 · 0fa49ce · 0fa49ce
1 parent f8b26c1
commit 0fa49ce
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 25 deletions.
diff --git a/src/components/AppHeading.vue b/src/components/AppHeading.vue
@@ -14,7 +14,7 @@
 
 <style lang="postcss" module>
 .heading {
-  @apply mb-2;
+  @apply mb-4;
 }
 
 .title {

diff --git a/src/components/AppIcon.vue b/src/components/AppIcon.vue
@@ -2,7 +2,11 @@
   <svg
     v-if="content"
     :viewBox="attributes.viewBox"
-    :class="[$style.icon, $style[`size-${size}`]]"
+    :class="{
+      [$style.icon]: true,
+      [$style.inline]: inline,
+      [$style[`size-${size}`]]: true,
+    }"
     v-html="content"
   />
 </template>
@@ -14,6 +18,10 @@ export default {
       type: String,
       default: '',
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
     size: {
       type: Number,
       default: 4,
@@ -50,6 +58,10 @@ export default {
   @apply block flex-shrink-0 mx-auto fill-current;
 }
 
+.inline {
+  @apply inline-flex -mt-1;
+}
+
 .size-4 {
   @apply w-4 h-4;
 }

diff --git a/src/components/SuggestedApps.vue b/src/components/SuggestedApps.vue
@@ -61,6 +61,7 @@ export default {
 
 <style lang="postcss" module>
 .wrap {
+  @apply p-8 pb-6 bg-gray-900 rounded;
   display: grid;
   grid-column-gap: theme('padding.8');
   grid-row-gap: theme('padding.4');
@@ -70,7 +71,7 @@ export default {
 .btn {
   @apply
     relative mb-8
-    text-center bg-gray-600 rounded shadow-lg;
+    text-center bg-gray-700 rounded shadow-lg;
 }
 
 .btn::before {
@@ -104,7 +105,7 @@ export default {
 .label {
   @apply
     absolute pt-2 min-w-0
-    text-center text-gray-500 truncate;
+    text-center text-gray-600 truncate;
   top: 100%;
   left: 0;
   right: 0;

diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
@@ -1,24 +1,42 @@
 <template>
-  <app-content :class="$style.wrap">
+  <app-content>
     <title-bar>
       <title-bar-text>
-        {{ $productInfo.productName }}
+        Welcome to {{ $productInfo.productName }}
       </title-bar-text>
     </title-bar>
-    <div :class="$style.content">
-      <app-heading>Welcome to {{ $productInfo.productName }}</app-heading>
-    </div>
-    <div :class="$style.content">
-      <app-heading>Get started with these suggested apps</app-heading>
-      <p>
-        Maybe some of these apps are interesting for you.
-        Just click on the icons of apps you like,
-        to add them to {{ $productInfo.productName }}.
-        Or create a custom tab by clicking on the "+"-Button
-        down below in the navigation.
-      </p>
-    </div>
-    <suggested-apps />
+
+    <app-content-section :class="$style.brandWrap">
+      <img
+        :class="$style.brandLogo"
+        :alt="$productInfo.productName"
+        src="@/assets/logo/logo.png"
+      >
+      <app-heading :class="$style.brandLabel">
+        {{ $productInfo.productName }}
+        <template slot="sub">
+          {{ $productInfo.version }}
+        </template>
+      </app-heading>
+    </app-content-section>
+
+    <app-content-section>
+      <app-heading>
+        Get started
+        <template slot="sub">
+          Maybe some of these suggested apps are interesting for you.
+          Just click on the icons of apps you like,
+          to add them to {{ $productInfo.productName }}.
+          Or create a custom tab by clicking on the
+          <app-icon
+            face="tab-plus"
+            inline
+          />-Button
+          down below in the navigation.
+        </template>
+      </app-heading>
+      <suggested-apps />
+    </app-content-section>
   </app-content>
 </template>
 
@@ -37,13 +55,16 @@ export default {
 };
 </script>
 
-
 <style lang="postcss" module>
-.wrap {
-  @apply p-8;
+.brandWrap {
+  @apply flex items-center pb-8 border-b-2 border-gray-700;
+}
+
+.brandLogo {
+  @apply block p-3 mr-4 w-16 h-16 bg-gray-300 rounded-full;
 }
 
-.content {
-  @apply mb-8;
+.brandLabel {
+  @apply mb-0;
 }
 </style>