From eb1857d0f3a9a2bcc1f75e771f035b1758091587 Mon Sep 17 00:00:00 2001
From: Ephraim <ephraim@sefaria.org>
Date: Tue, 11 Feb 2025 17:44:38 +0200
Subject: [PATCH] refactor(modularization): Use the new themable button in the
 sheets homepage

---
 static/css/s2.css        |  5 ++++-
 static/js/NavSidebar.jsx | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/css/s2.css b/static/css/s2.css
index f4d182773b..da000869ca 100644
--- a/static/css/s2.css
+++ b/static/css/s2.css
@@ -1817,9 +1817,12 @@ div.interfaceLinks-row a {
 .navSidebar .linkList {
   margin-top: 20px;
 }
-.navSidebarModule .button {
+.navSidebarModule .button{
   margin: 12px 0 0 0;
 }
+.navSidebarModule .sidebarModuleText{
+  margin-bottom: 12px;
+}
 .navSidebarModule .button img {
   filter: invert(1);
   height: 18px;
diff --git a/static/js/NavSidebar.jsx b/static/js/NavSidebar.jsx
index 726b83e58d..bb655e303c 100644
--- a/static/js/NavSidebar.jsx
+++ b/static/js/NavSidebar.jsx
@@ -83,7 +83,9 @@ const SidebarModuleTitle = ({children, en, he}) => {
 const TitledText = ({children, title, text}) => {
   return <SidebarModule>
             <SidebarModuleTitle en={title.en} he={title.he}/>
-            <InterfaceText markdown={{en: text.en, he: text.he}} />
+            <p class="sidebarModuleText">
+                 <InterfaceText markdown={{en: text.en, he: text.he}} />
+            </p>
             {children}
         </SidebarModule>
 };
@@ -727,11 +729,15 @@ const StayConnected = () => { // TODO: remove? looks like we are not using this
 
 const GetStartedButton = () => {
     const href = Sefaria._v({"en": "/sheets/393695", "he": "/sheets/399333"})
-    return <Button className="getStartedSheets" onClick={() => window.location.href=href}>Get Started</Button>;
+    return <Button variant="secondary" className="getStartedSheets" onClick={() => window.location.href=href}>Get Started</Button>;
 }
 const CreateSheetsButton = () => {
   // #sheetsButton
-  return <Button icon={"/static/icons/new-sheet-black.svg"} className="small" onClick={() => window.location.href="/sheets/new"}>Create</Button>
+  return (
+    <Button icon={"new-sheet-black"} onClick={() => window.location.href="/sheets/new"}>
+      <InterfaceText text={{'en': 'Create', 'he': 'דף חדש'}} />
+    </Button>
+  ) // hebrew is placeholder
 }
 const CreateASheet = () => (
   <TitledText title={{'en': 'Create A Sheet', 'he': ''}}