Merge pull request #57 from restorecommerce/bugfix/refactor-design-an…

…d-styles

Bugfix/refactor design and styles

apps/restorecommerce/project.json

@@ -22,12 +22,8 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/restorecommerce/tsconfig.app.json",
         "assets": [
-          "apps/restorecommerce/src/manifest.webmanifest",
-          {
-            "input": "apps/restorecommerce/src/assets",
-            "glob": "**/*",
-            "output": "./assets"
-          }
+          "apps/restorecommerce/src/assets",
+          "apps/restorecommerce/src/manifest.webmanifest"
         ],
         "styles": [
           "packages/modules/ui/src/lib/modules-ui.styles.scss",

apps/restorecommerce/src/environments/environment.development.ts

@@ -2,11 +2,10 @@ import { IEnvironment } from '@console-core/types';
 
 export const environment: Readonly<IEnvironment> = {
   production: false,
-  oidcKey:
-    'cEpxYVdXQWNqdGRZVzZqQno5ZmhVUmJqYXBmaldvanI6dW05VU5vWVc2cXc5bVpDRGdNZVB5N2dDbkRHVEdSVkI=',
+  oidcKey: 'VEVTVF9DTElFTlRfSUQ6VEVTVF9DTElFTlRfU0VDUkVU=',
   storagePrefix: 'console.dev.',
   urls: {
-    api: 'https://api.restorecommerce.io',
-    graphql: 'https://api.restorecommerce.io/graphql',
+    api: 'http://192.168.1.38:5000',
+    graphql: 'http://192.168.1.38:5000/graphql',
   },
 };

apps/restorecommerce/src/index.html

@@ -8,11 +8,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1"
     />
-
     <link
       rel="icon"
-      type="image/x-icon"
-      href="assets/images/Logo_K_square.svg"
+      type="image/svg+xml"
+      href="assets/images/restore_commerce_logo_square.svg"
     />
     <link
       rel="manifest"

packages/modules/ui/src/lib/components/organisms/crud/crud-main.component.html

@@ -117,7 +117,7 @@
                 <vcl-icon icon="mdi:delete" />
               </button>
             </rc-toolbar>
-            <rc-scrollable-container height="170px">
+            <rc-scrollable-container height="145px">
               <div class="row">
                 <div class="flex p-2">
                   <ng-content select="[rc-crud-router-outlet]" />
@@ -164,7 +164,7 @@
   <ng-template #searchAndDataListTemplate>
     <ng-content select="[rc-crud-search]" />
 
-    <rc-scrollable-container height="230px">
+    <rc-scrollable-container height="193px">
       <ng-content select="[rc-crud-data-list]" />
     </rc-scrollable-container>
   </ng-template>

packages/modules/ui/src/lib/components/organisms/data-list-order/data-list-order.component.html

@@ -13,8 +13,10 @@
   <div class="flex">
     <div class="row">
       <div class="flex">
-        <p class="m-0">{{ customer?.firstName }} {{ customer?.lastName }}</p>
-        <p class="m-0 mt-1">{{ shop?.name }}</p>
+        <p class="m-0 pl-2">
+          {{ customer?.firstName }} {{ customer?.lastName }}
+        </p>
+        <p class="m-0 pl-2 mt-1">{{ shop?.name }}</p>
       </div>
       <div class="align-right secondary-text-color">
         <p

packages/modules/ui/src/lib/components/organisms/data-list-product/data-list-product.component.html

@@ -15,8 +15,8 @@
   <div class="flex">
     <div class="row">
       <div class="flex">
-        <p class="m-0">{{ product.product.name }}</p>
-        <p class="m-0 mt-1 secondary-text-color">
+        <p class="m-0 pl-2">{{ product.product.name }}</p>
+        <p class="m-0 pl-2 mt-1 secondary-text-color">
           {{ product.product.description }}
         </p>
       </div>

packages/modules/ui/src/lib/components/pages/authn/page-activation/page-activation.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="vm$ | async as vm">
   <div class="self-center justify-center">
     <div class="row rc-activation">
-      <div class="gutter-margin-t-b">
+      <div>
         <div class="align-centered">
           <h2>Account Activation</h2>
 

packages/modules/ui/src/lib/components/pages/authn/page-confirm-password/page-confirm-password.component.html

@@ -1,6 +1,6 @@
 <div class="self-center justify-center">
   <div class="row rc-password-confirm">
-    <div class="">
+    <div>
       <h2>Confirm Password</h2>
       <p>
         Please provide the necessary information to complete your password

packages/modules/ui/src/lib/components/pages/authn/page-password-recovery/page-password-recovery.component.html

@@ -1,6 +1,6 @@
 <div class="self-center justify-center">
   <div class="row rc-password-recovery-form">
-    <div class="">
+    <div>
       <h2>Password Recovery</h2>
       <p>
         Please enter the the email or username associated with your account.

packages/modules/ui/src/lib/components/pages/authn/page-sign-in/page-sign-in.component.html

@@ -1,11 +1,14 @@
-<div class="flex col justify-center">
+<!--
+ <div class="flex col justify-center">
   <div class="self-center justify-center rc-sign-in-form">
-    <div class="row rc-sign-in-form-inner">
-      <div class="w-45p-t-b">
+    <div
+      class="row rc-sign-in-form-inner"
+      style="width: 815px"
+    >
+      <div class="w-45p">
         <h2>Sign In</h2>
         <rc-authn-sign-in />
       </div>
-      <!--
       <div
         class="w-10p divider divider-vertical row center justify-center rc-sign-in-form-divider-v"
       >
@@ -24,7 +27,7 @@ <h2>Sign In</h2>
         </div>
       </div>
 
-      <div class="w-45p col justify-center-t-b">
+      <div class="w-45p col justify-center">
         <a
           [routerLink]="ROUTER.pages.main.children.auth.children.signUp.link"
           class="col justify-center"
@@ -36,7 +39,17 @@ <h2>Sign In</h2>
             Create an account
           </button>
         </a>
-      </div> -->
+      </div>
+    </div>
+  </div>
+</div>
+-->
+
+<div class="self-center justify-center">
+  <div class="row rc-sign-in-form">
+    <div>
+      <h2>Sign In</h2>
+      <rc-authn-sign-in />
     </div>
   </div>
 </div>

packages/modules/ui/src/lib/components/pages/authn/page-sign-out/page-sign-out.component.html

@@ -1,6 +1,6 @@
 <div class="self-center justify-center">
   <div class="row rc-sign-out">
-    <div class="gutter-margin-t-b align-centered">
+    <div class="align-centered">
       <h2>Signing out</h2>
       <p>Please wait...</p>
     </div>

packages/modules/ui/src/lib/components/pages/authn/page-sign-up/page-sign-up.component.html

@@ -1,6 +1,6 @@
 <div class="self-center justify-center">
   <div class="row rc-sign-up-form">
-    <div class="">
+    <div>
       <h2>Sign Up</h2>
       <p>
         Please provide the necessary information to complete your registration

packages/modules/ui/src/lib/styles/app.scss

@@ -43,8 +43,15 @@ rc-header.application-header {
     height: 100%;
   }
 
-  button.user {
-    height: 43px;
+  rc-header-toolbar {
+    button.user {
+      height: 43px;
+    }
+
+    vcl-icon {
+      font-size: 1rem;
+      padding-bottom: 2px;
+    }
   }
 }
 
@@ -54,6 +61,7 @@ rc-header.application-header {
   }
 
   .container {
+    height: 100vh;
     background-color: $console-white;
     border-color: $console-white;
   }
@@ -78,7 +86,7 @@ vcl-hint-error {
   color: $wrapper-popover-user-link-color;
 
   vcl-icon {
-    font-size: 1.25rem;
+    font-size: 1rem;
   }
 
   div {

packages/modules/ui/src/lib/styles/data-list.scss

@@ -2,7 +2,7 @@
 @use './theme/_console-variables.scss' as *;
 
 .infinite-scroll-viewport {
-  height: calc(100vh - 230px);
+  height: calc(100vh - 193px);
   overflow-y: scroll;
 }
 

packages/modules/ui/src/lib/styles/index.scss

@@ -1,13 +1,13 @@
 @use './console.scss';
 @use './app.scss';
-@use './authn.scss';
 @use './badge.scss';
 @use './drawer.scss';
 @use './forms.scss';
 @use './orders.scss';
 @use './page.scss';
 @use './products.scss';
 @use './toolbar.scss';
+@use './public.scss';
 @use './sidebar.scss';
 @use './data-list.scss';
 @use './utility.scss';

packages/modules/ui/src/lib/styles/authn.scss → packages/modules/ui/src/lib/styles/public.scss

@@ -1,4 +1,3 @@
-@use '@vcl/vcl/theme' as *;
 @use './theme/_console-variables.scss' as *;
 
 .rc-auth {
@@ -9,7 +8,6 @@
   margin: 0;
 
   .rc-auth-wrapper {
-    background-color: #fff;
     padding: 30px;
 
     header {
@@ -33,7 +31,7 @@
         width: 450px;
         box-sizing: border-box;
         border-radius: 0.3rem;
-        background: $white;
+        background: $console-white;
         padding: 1rem;
       }
     }
@@ -53,10 +51,6 @@
       & .button.half-transparent {
         font-weight: normal;
       }
-
-      & > div {
-        width: 815px;
-      }
     }
 
     @media (max-width: 750px) {
@@ -83,8 +77,6 @@
           width: 370px;
           box-sizing: border-box;
           border-radius: 0.3rem;
-          // background: $white;
-          // padding: 1rem;
         }
       }