From 33297d394d60b0b4e0444222fe35f43383c8a4cf Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Thu, 16 May 2019 17:24:43 +0200
Subject: [PATCH] feat: change styles of pages views to version 3

---
 src/views/pages/Login.vue    | 101 ++++++++++++++++++-----------------
 src/views/pages/Page404.vue  |  18 +++----
 src/views/pages/Page500.vue  |  18 +++----
 src/views/pages/Register.vue |  26 +++++----
 4 files changed, 84 insertions(+), 79 deletions(-)

diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 83d51107..198c44cd 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,55 +1,56 @@
 <template>
-  <div class="app flex-row align-items-center">
-    <div class="container">
-      <CRow class="justify-content-center">
-        <CCol md="8">
-          <CCardGroup>
-            <CCard class="p-4">
-              <CCardBody>
-                <CForm>
-                  <h1>Login</h1>
-                  <p class="text-muted">Sign In to your account</p>
-                  <CFormInput
-                    prepend="<i class='icon-user'></i>"
-                    placeholder="Username"
-                    autocomplete="username email"
-                  />
-                  <CFormInput
-                    prepend="<i class='icon-lock'></i>"
-                    placeholder="Password"
-                    type="password"
-                    autocomplete="curent-password"
-                  />
-                  <CRow>
-                    <CCol col="6">
-                      <CButton variant="primary" class="px-4">Login</CButton>
-                    </CCol>
-                    <CCol col="6" class="text-right">
-                      <CButton variant="link" class="px-0">Forgot password?</CButton>
-                    </CCol>
-                  </CRow>
-                </CForm>
-              </CCardBody>
-            </CCard>
-            <CCard
-              class="text-white text-center bg-primary py-5 d-md-down-none"
-              style="width:44%"
-              bodyWrapper
+  <CContainer
+    class="c-d-flex c-align-items-center"
+    style="min-height:100vh;"
+  >
+    <CRow class="c-justify-content-center" >
+      <CCol md="8">
+        <CCardGroup>
+          <CCard class="c-p-4">
+            <CCardBody>
+              <CForm>
+                <h1>Login</h1>
+                <p class="text-muted">Sign In to your account</p>
+                <CFormInput
+                  prepend="<i class='icon-user'></i>"
+                  placeholder="Username"
+                  autocomplete="username email"
+                />
+                <CFormInput
+                  prepend="<i class='icon-lock'></i>"
+                  placeholder="Password"
+                  type="password"
+                  autocomplete="curent-password"
+                />
+                <CRow>
+                  <CCol col="6">
+                    <CButton variant="primary" class="c-px-4">Login</CButton>
+                  </CCol>
+                  <CCol col="6" class="c-text-right">
+                    <CButton variant="link" class="c-px-0">Forgot password?</CButton>
+                  </CCol>
+                </CRow>
+              </CForm>
+            </CCardBody>
+          </CCard>
+          <CCard
+            class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
+            style="width:44%"
+            bodyWrapper
+          >
+            <h2>Sign up</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            <CButton
+              variant="primary"
+              class="active c-mt-3"
             >
-              <h2>Sign up</h2>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-              <CButton
-                variant="primary"
-                class="active mt-3"
-              >
-                Register Now!
-              </CButton>
-            </CCard>
-          </CCardGroup>
-        </CCol>
-      </CRow>
-    </div>
-  </div>
+              Register Now!
+            </CButton>
+          </CCard>
+        </CCardGroup>
+      </CCol>
+    </CRow>
+  </CContainer>
 </template>
 
 <script>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index ac6e8b2c..0efe1591 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="app flex-row align-items-center">
-    <div class="container">
-      <CRow class="justify-content-center">
+  <div class="app c-flex-row c-align-items-center">
+    <CContainer>
+      <CRow class="c-justify-content-center">
         <CCol md="6">
-          <div class="clearfix">
-            <h1 class="float-left display-3 mr-4">404</h1>
-            <h4 class="pt-3">Oops! You're lost.</h4>
-            <p class="text-muted">The page you are looking for was not found.</p>
+          <div class="c-clearfix">
+            <h1 class="c-float-left c-display-3 c-mr-4">404</h1>
+            <h4 class="c-pt-3">Oops! You're lost.</h4>
+            <p class="c-text-muted">The page you are looking for was not found.</p>
           </div>
           <CFormInput
-            class="mb-0"
+            class="c-mb-0"
             prepend="<i class='fa fa-search'></i>"
             placeholder="What are you looking for?"
           >
@@ -19,7 +19,7 @@
           </CFormInput>
         </CCol>
       </CRow>
-    </div>
+    </CContainer>
   </div>
 </template>
 
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index 4785d949..cc72c761 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="app flex-row align-items-center">
-    <div class="container">
-      <CRow class="justify-content-center">
+  <div class="c-app c-flex-row c-align-items-center">
+    <CContainer>
+      <CRow class="c-justify-content-center">
         <CCol md="6">
-          <div class="clearfix">
-            <h1 class="float-left display-3 mr-4">500</h1>
-            <h4 class="pt-3">Houston, we have a problem!</h4>
-            <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
+          <div class="c-clearfix">
+            <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
+            <h4 class="c-pt-3">Houston, we have a problem!</h4>
+            <p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
           </div>
           <CFormInput
-            class="mb-0"
+            class="c-mb-0"
             prepend="<i class='fa fa-search'></i>"
             placeholder="What are you looking for?"
           >
@@ -19,7 +19,7 @@
           </CFormInput>
         </CCol>
       </CRow>
-    </div>
+    </CContainer>
   </div>
 </template>
 
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index a3b66097..deec2ab2 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="app flex-row align-items-center">
-    <div class="container">
-      <CRow class="justify-content-center">
+  <div class="c-app c-flex-row c-align-items-center">
+    <CContainer>
+      <CRow class="c-justify-content-center">
         <CCol md="6" sm="8">
-          <CCard class="mx-4">
-            <CCardBody class="p-4">
+          <CCard class="c-mx-4">
+            <CCardBody class="c-p-4">
               <CForm>
                 <h1>Register</h1>
-                <p class="text-muted">Create your account</p>
+                <p class="c-text-muted">Create your account</p>
                 <CFormInput
                   placeholder="Username"
                   prepend="<i class='icon-user'></i>"
@@ -29,25 +29,29 @@
                   type="password"
                   prepend="<i class='icon-lock'></i>"
                   autocomplete="new-password"
-                  class="mb-4"
+                  class="c-mb-4"
                 />
                 <CButton variant="success" block>Create Account</CButton>
               </CForm>
             </CCardBody>
-            <CCardFooter class="p-4">
+            <CCardFooter class="c-p-4">
               <CRow>
                 <CCol col="6">
-                  <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
+                  <CButton block class="btn btn-facebook">
+                    <span>facebook</span>
+                  </CButton>
                 </CCol>
                 <CCol col="6">
-                  <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
+                  <CButton block class="btn btn-twitter" type="button">
+                    <span>twitter</span>
+                  </CButton>
                 </CCol>
               </CRow>
             </CCardFooter>
           </CCard>
         </CCol>
       </CRow>
-    </div>
+    </CContainer>
   </div>
 </template>