Fix #19357: Updated Social Icons (#19385)

* feat: Updated icons and added hover * feat: Update icons and added hover effect * feat: Update icons and added hover effect * feat: Update icons and added hover effect * feat: Update icons and added hover effect * Update Instagram Icon * Update Instagram Icon * Update Instagram Icon * Update .gitignore --------- Co-authored-by: Sean Lip <sean@seanlip.org>
oppia · Jan 12, 2024 · a0c1a6b · a0c1a6b
1 parent a922db8
commit a0c1a6b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 18 deletions.
diff --git a/core/templates/components/button-directives/social-buttons.component.css b/core/templates/components/button-directives/social-buttons.component.css
@@ -41,30 +41,33 @@
 .oppia-footer-social .oppia-footer-social-icons .oppia-instagram-follow {
   background: #d6249f;
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285aeb 90%);
+  border-radius: 8px;
   margin-right: 6px;
-  padding: 5px 6px;
+  padding: 9px 12px;
 }
 .oppia-footer-social .oppia-footer-social-icons .oppia-youtube-follow {
   background: #cd201f;
-  border-radius: 5px;
+  border-radius: 8px;
   margin-right: 6px;
-  padding: 5px 9px;
+  padding: 9px 9px;
 }
 .oppia-footer-social .oppia-footer-social-icons .oppia-facebook-follow {
   background: #3b5998;
-  border-radius: 5px;
+  border-radius: 8px;
   margin-right: 6px;
-  padding: 5px 10px;
+  padding: 10px 15px;
 }
 .oppia-footer-social .oppia-footer-social-icons .oppia-twitter-follow {
   background: #000;
+  border-radius: 8px;
   margin-right: 6px;
-  padding: 5px 6px;
+  padding: 10px 10px;
 }
 .oppia-footer-social .oppia-footer-social-icons .oppia-github-follow {
   background: #fff;
+  border-radius: 8px;
   margin-right: 6px;
-  padding: 5px 6px;
+  padding: 10px 10px;
 }
 .oppia-follow-github-icon {
   color: #000;
@@ -82,6 +85,14 @@
   position: relative;
 }
 
+.oppia-footer-social .oppia-youtube-follow:hover,
+.oppia-footer-social .oppia-facebook-follow:hover,
+.oppia-footer-social .oppia-twitter-follow:hover,
+.oppia-footer-social .oppia-github-follow:hover,
+.oppia-footer-social .oppia-instagram-follow:hover {
+  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .4);
+}
+
 .oppia-footer-social a .oppia-android-app-button {
   display: block;
   margin-top: 20px;

diff --git a/core/templates/components/button-directives/social-buttons.component.html b/core/templates/components/button-directives/social-buttons.component.html
@@ -7,27 +7,24 @@
 
   <div class="oppia-footer-social-icons">
 
-    <div class="oppia-instagram-follow">
-      <a href="https://www.instagram.com/oppia.global" target="_blank" rel="noopener">
-        <i class="oppia-follow-icons fa-brands fa-instagram"></i>
-        <span class="oppia-icon-accessibility-label">Instagram</span>
+    <div class="oppia-youtube-follow">
+      <a href="https://www.youtube.com/channel/UC5c1G7BNDCfv1rczcBp9FPw" target="_blank" rel="noopener">
+        <i class="oppia-follow-icons fab fa-youtube"></i>
+        <span class="oppia-icon-accessibility-label">Youtube</span>
       </a>
     </div>
-
     <div class="oppia-facebook-follow">
       <a href="https://www.facebook.com/oppiaorg" target="_blank" rel="noopener">
         <i class="oppia-follow-icons fab fa-facebook-f"></i>
         <span class="oppia-icon-accessibility-label">Facebook</span>
       </a>
     </div>
-
-    <div class="oppia-youtube-follow">
-      <a href="https://www.youtube.com/channel/UC5c1G7BNDCfv1rczcBp9FPw" target="_blank" rel="noopener">
-        <i class="oppia-follow-icons fab fa-youtube"></i>
-        <span class="oppia-icon-accessibility-label">Youtube</span>
+    <div class="oppia-instagram-follow">
+      <a href="https://www.instagram.com/oppia.global" target="_blank" rel="noopener">
+        <i class="oppia-follow-icons fa-brands fa-instagram"></i>
+        <span class="oppia-icon-accessibility-label">Instagram</span>
       </a>
     </div>
-
     <div class="oppia-twitter-follow">
       <a href="https://twitter.com/oppiaorg" target="_blank" rel="noopener">
         <i class="oppia-follow-icons fa-brands fa-x-twitter"></i>