Update formatting

src/components/Sidebar.tsx

@@ -56,29 +56,13 @@ export default function Sidebar(props: Props) {
             itemListElement="div"
         >
             <div style={{ outline: 'none' }}>
-                <h4 style={{ marginBottom: '20px' }}>{constants.SUBSCRIPTION_PLAN}</h4>
-                {constants.SUBSCRIPTION_INFO(
-                    subscription?.productID,
-                    subscription?.expiryTime
-                )}
-
-                <Button
-                    variant="success"
-                    size="sm"
-                    onClick={() => setChangeDisabledMessageModalView(true)}
-                >
-                    {constants.CHANGE}
-                </Button>
-                <ChangeDisabledMessage
-                    show={changeDisabledMessageModalView}
-                    onHide={() => setChangeDisabledMessageModalView(false)}
-                />
-                <br />
-                <br />
-                <br />
+                <h4 style={{ marginBottom: '12px' }}>{constants.SUBSCRIPTION_PLAN}</h4>
+                {
+                    subscription?.productID == "free" ? constants.FREE_SUBSCRIPTION_INFO(subscription?.expiryTime) : constants.PAID_SUBSCRIPTION_INFO(subscription?.expiryTime)
+                }
             </div>
-            <div style={{ outline: 'none' }}>
-                <h4>{constants.USAGE_DETAILS}</h4>
+            <div style={{ outline: 'none', marginTop: '40px' }}>
+                <h4 style={{ marginBottom: '12px' }}>{constants.USAGE_DETAILS}</h4>
                 <div>
                     {usage ? (
                         constants.USAGE_INFO(
@@ -95,7 +79,6 @@ export default function Sidebar(props: Props) {
                         <Spinner animation="border" />
                     )}
                 </div>
-                <br />
             </div>
             <>
                 <ConfirmLogout
@@ -103,9 +86,9 @@ export default function Sidebar(props: Props) {
                     onHide={closeLogoutModal}
                     logout={logout}
                 />
-                <Button variant="danger" onClick={showLogoutModal}>
+                <h4 style={{ cursor: 'pointer', color: '#F96C6C', marginTop: '40px' }} onClick={showLogoutModal}>
                     logout
-                </Button>
+                </h4>
             </>
         </Menu>
     );

src/pages/_app.tsx

@@ -77,7 +77,10 @@ const GlobalStyles = createGlobalStyle`
         width:90vw;
         max-width:960px!important;
     }
-    .modal .modal-header, .modal  .modal-footer {
+    .modal {
+        z-index: 2000;
+    }
+    .modal .modal-header, .modal .modal-footer {
         border-color: #444 !important;
     }
     .modal .modal-header .close {

src/utils/strings/englishConstants.tsx

@@ -103,17 +103,20 @@ const englishConstants = {
     SUBSCRIPTION_CHANGE_DISABLED:
         'sorry, this operation is currently not supported on the web, please check your mobile app',
     SUBSCRIPTION_PLAN: 'subscription plan',
-    USAGE_DETAILS: 'usage details',
-    SUBSCRIPTION_INFO: (productID, expiryTime) => (
+    USAGE_DETAILS: 'usage',
+    FREE_SUBSCRIPTION_INFO: (expiryTime) => (
         <>
             <p>
-                you are currently on <strong>{productID}</strong> plan
+                you are on the <strong>free</strong> plan {' '} that expires on {' '}
+                {new Date(expiryTime / 1000).toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' })}
             </p>
+        </>
+    ),
+    PAID_SUBSCRIPTION_INFO: (expiryTime) => (
+        <>
             <p>
-                {' '}
-                which expires on {new Date(
-                    expiryTime / 1000
-                ).toDateString()}{' '}
+                your subscription will renew on {' '}
+                {new Date(expiryTime / 1000).toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' })}
             </p>
         </>
     ),