Add login and register

wp-content/themes/academyAfrica/assets/css/src/components/_modal.scss

@@ -128,36 +128,48 @@ label {
     font-weight: 700;
     line-height: 17px; /* 121.429% */
   }
-  .google {
-    display: flex;
-    width: 250px;
-    padding-left: 10px;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--White, #fff);
-    box-shadow: 1.38889px 1.38889px 3.47222px 0px rgba(0, 0, 0, 0.25);
-    height: 40px;
-    margin-top: 22px;
-    cursor: pointer;
-
-    .sign-in-with-google {
-      flex: 1;
-      height: 100%;
-      border: none;
-      background: transparent;
-      color: var(--primary-700, #0c1a81);
-      text-align: center;
-      font-family: Roboto;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 24px;
-    }
-  }
   .social-login {
     margin-top: 22px;
-    ul {
-      margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    button {
+      border-radius: 10px;
+      background: #fff;
+      padding: 15px;
+      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      height: 54px;
+      width: 100%;
+      border: none;
+      gap: 15px;
+      &.google {
+        color: rgba(0, 0, 0, 0.54);
+        font-family: Open Sans;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+      &.facebook {
+        gap: 15px;
+        color: #1877f2;
+        font-family: Open Sans;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+      &.twitter {
+        color: var(--shades-black, #000);
+        font-family: Open Sans;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
     }
   }
   .content-divider {