refactor: refactor pages

src/views/pages/Login.vue

@@ -1,8 +1,5 @@
 <template>
-  <CContainer
-    class="c-d-flex c-align-items-center"
-    style="min-height:100vh;"
-  >
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
     <CRow class="c-justify-content-center">
       <CCol md="8">
         <CCardGroup>
@@ -10,7 +7,7 @@
             <CCardBody>
               <CForm>
                 <h1>Login</h1>
-                <p class="text-muted">Sign In to your account</p>
+                <p class="c-text-muted">Sign In to your account</p>
                 <CFormInput
                   prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
@@ -42,7 +39,7 @@
             <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"
+              class="c-active c-mt-3"
             >
               Register Now!
             </CButton>

src/views/pages/Page404.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
+    <CRow class="c-w-100 c-justify-content-center">
       <CCol md="6">
+        <div class="c-w-100">
         <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>
@@ -17,10 +17,10 @@
             <CButton variant="info">Search</CButton>
           </template>
         </CFormInput>
+      </div>
       </CCol>
     </CRow>
   </CContainer>
-  </div>
 </template>
 
 <script>

src/views/pages/Page500.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="c-app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
+    <CRow class="c-w-100 c-justify-content-center">
       <CCol md="6">
         <div class="c-clearfix">
           <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
@@ -20,7 +19,6 @@
       </CCol>
     </CRow>
   </CContainer>
-  </div>
 </template>
 
 <script>

src/views/pages/Register.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="c-app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
+  <CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
+    <CRow class="c-w-100 c-justify-content-center">
       <CCol md="6" sm="8">
         <CCard class="c-mx-4">
           <CCardBody class="c-p-4">
@@ -37,14 +36,10 @@
           <CCardFooter class="c-p-4">
             <CRow>
               <CCol col="6">
-                  <CButton block class="btn btn-facebook">
-                    <span>facebook</span>
-                  </CButton>
+                <CButton block variant="facebook" textHtml="Facebook"/>
               </CCol>
               <CCol col="6">
-                  <CButton block class="btn btn-twitter" type="button">
-                    <span>twitter</span>
-                  </CButton>
+                <CButton block variant="twitter" textHtml="Twitter"/>
               </CCol>
             </CRow>
           </CCardFooter>
@@ -52,7 +47,6 @@
       </CCol>
     </CRow>
   </CContainer>
-  </div>
 </template>
 
 <script>