From b21c8f8c3a092ebee1d48f951f9e8ebf11986f36 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 31 Jan 2022 12:15:58 +0530
Subject: [PATCH] Add credits in app about section

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/room/PeopleDrawer.scss |  4 +++-
 src/app/organisms/settings/Settings.jsx  | 17 +++++++++++++++--
 src/app/organisms/settings/Settings.scss |  9 ++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/app/organisms/room/PeopleDrawer.scss b/src/app/organisms/room/PeopleDrawer.scss
index 1cd8fb0..cfc5f6c 100644
--- a/src/app/organisms/room/PeopleDrawer.scss
+++ b/src/app/organisms/room/PeopleDrawer.scss
@@ -68,7 +68,9 @@
   & .people-selector {
     padding: var(--sp-extra-tight);
     border-radius: var(--bo-radius);
-    @include dir.side(margin, var(--sp-extra-tight), 0);
+    &__container {
+      @include dir.side(margin, var(--sp-extra-tight), 0);
+    }
   }
   
   & .segmented-controls {
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 0c3e1aa..f9cc631 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -196,11 +196,11 @@ function SecuritySection() {
 
 function AboutSection() {
   return (
-    <div className="settings-content settings__about">
+    <div className="settings-content set__about">
       <div className="set-about__branding">
         <img width="60" height="60" src={CinnySVG} alt="Cinny logo" />
         <div>
-          <Text variant="h2">
+          <Text variant="h2" weight='medium'>
             Cinny
             <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>{`v${cons.version}`}</span>
           </Text>
@@ -212,6 +212,19 @@ function AboutSection() {
           </div>
         </div>
       </div>
+      <div className="set-about__credits">
+        <Text variant="s1" weight="medium">Credits</Text>
+        <ul>
+          <li>
+            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+            <Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
+          </li>
+          <li>
+            {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+            <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }
diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index cb8d139..5445122 100644
--- a/src/app/organisms/settings/Settings.scss
+++ b/src/app/organisms/settings/Settings.scss
@@ -39,7 +39,7 @@
     display: flex;
 
     & > div {
-      margin: 0 calc(var(--sp-loose) + var(--sp-ultra-tight));
+      margin: 0 var(--sp-loose);
     }
 
   }
@@ -50,4 +50,11 @@
       margin: 0 var(--sp-tight)
     }
   }
+
+  &__credits {
+    margin-top: var(--sp-loose);
+    & ul {
+      margin: var(--sp-extra-tight) 0;
+    }
+  }
 }
\ No newline at end of file