Merge pull request #18 from HORNET-Storage/fix/table-selection-issues

fix: padding on y-axis label

src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx

@@ -110,7 +110,6 @@ export const BarAnimationDelayChart: React.FC = () => {
     yAxis: {
       name: noData ? '' : t('charts.gigabytes'),
       nameTextStyle: {
-        padding: noData ? [0, 0] : [0, -24],
         align: 'left',
       },
       axisLabel: {

src/components/layouts/main/sider/MainSider/MainSider.styles.ts

@@ -83,6 +83,7 @@ export const SiderLogoDiv = styled.div`
 `;
 
 export const BrandSpan = styled.span`
+    
   margin: 0 1rem;
   font-weight: 600;
   font-size: 0.9rem;

src/components/medical-dashboard/activityCard/ActivityChart.tsx

@@ -252,6 +252,9 @@ export const ActivityChart: React.FC = () => {
       name: noData ? '' : t('charts.gigabytes'),
       type: 'value',
       min: 0,
+      nameTextStyle: {
+        align: 'left',
+      },
       axisLabel: {
         formatter: '{value} GB',
         color: themeObject[theme].textLight,

src/components/nft-dashboard/activityStory/ActivityStoryItem/ActivityStoryItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { useTranslation } from 'react-i18next';
 import { WalletTransaction } from '@app/api/activity.api';
 import { Dates } from '@app/constants/Dates';
@@ -7,19 +7,36 @@ import { CurrencyTypeEnum } from '@app/interfaces/interfaces';
 import * as S from './ActivityStoryItem.styles';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
 import { BaseCol } from '@app/components/common/BaseCol/BaseCol';
+function makeHexId(length: number): string {
+  const characters = 'abcdef0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
 
 export const ActivityStoryItem: React.FC<WalletTransaction> = ({ witness_tx_id, date, output, value }) => {
   const { t } = useTranslation();
+  const [transactionId, setTransactionId] = useState<string | null>(null);
+
+  // Effect to initialize the transaction ID when the component mounts
+  useEffect(() => {
+    if (!witness_tx_id) {
+      setTransactionId(makeHexId(64));
+    }
+  }, [witness_tx_id]);
 
-  // Convert value to number
   const numericValue = parseFloat(value);
 
+
+
   return (
     <S.TransactionCard>
       <BaseRow gutter={[20, 20]} wrap={true} align="middle">
         <BaseCol span={24}>
           <S.Label>{t('Witness Transaction ID')}:</S.Label>
-          <S.Address style={{ color: 'var(--text-main)' }}>{witness_tx_id}</S.Address>
+          <S.Address style={{ color: 'var(--text-main)' }}>  {witness_tx_id ? witness_tx_id : transactionId}</S.Address>
         </BaseCol>
         <BaseCol span={24}>
           <S.Label>{t('Output')}:</S.Label>

src/components/nft-dashboard/trending-creators/TrendingCreators.tsx

@@ -44,7 +44,7 @@ export const TrendingCreators: React.FC = () => {
       profile11,
     ],
   };
-  const { isTablet: isTabletOrHigher, isDesktop } = useResponsive();
+  const { isTablet: isTabletOrHigher } = useResponsive();
   const { t } = useTranslation();
 
   const goPrev = () => {
@@ -72,11 +72,14 @@ export const TrendingCreators: React.FC = () => {
         drag="free"
         gap=".2rem"
         snap="false"
-        autoSpeed={isDesktop ? 0.7 : 0.8}
+        autoSpeed={isTabletOrHigher ? 0.7 : 0.8}
         flickPower="500"
         breakpoints={{
           8000: {
-            perPage: 8, // Large desktops and above
+            perPage: 10, // Large desktops and above
+          },
+          1920: {
+            perPage: 10,
           },
           1600: {
             perPage: 8, // Smaller desktops

src/locales/en/translation.json

@@ -107,13 +107,13 @@
     "nuclear": "Nuclear",
     "oil": "Oil",
     "kinds": "Kinds",
-    "pie": "Nostr Relay Contents",
+    "pie": "Nostr Relay Storage",
     "scatter": "Scatter",
     "search": "Search Engine",
     "union": "Union Ads",
     "video": "Video Ads",
     "visitorsFrom": "Contents from",
-    "monthlyDataUsage": "Notes and Media",
+    "monthlyDataUsage": "Notes vs Media",
     "notes": "Notes",
     "media": "Media"
   },

src/pages/RelaySettingsPage.tsx

@@ -69,32 +69,32 @@ const RelaySettingsPage: React.FC = () => {
   const { isDesktop } = useResponsive();
 
   const categories = [
-    { id: 1, name: 'Basic Features' },
-    { id: 2, name: 'Extra Features' },
-    { id: 3, name: 'Git Features' },
+    { id: 1, name: 'Basic Nostr Features' },
+    { id: 2, name: 'Extra Nostr Features' },
+    { id: 3, name: 'GitNestr Features' },
   ];
 
   const noteOptions = [
     { kind: 0, kindString: 'kind0', description: 'Metadata', category: 1 },
     { kind: 1, kindString: 'kind1', description: 'Text Note', category: 1 },
     { kind: 2, kindString: 'kind2', description: 'Recommend Relay', category: 1 },
-    { kind: 3, kindString: 'kind3', description: 'Contacts', category: 1 },
+    { kind: 3, kindString: 'kind3', description: 'Follow List', category: 1 },
     { kind: 5, kindString: 'kind5', description: 'Event Deletion', category: 1 },
     { kind: 6, kindString: 'kind6', description: 'Repost', category: 1 },
     { kind: 7, kindString: 'kind7', description: 'Reaction', category: 1 },
     { kind: 8, kindString: 'kind8', description: 'Badge Award', category: 2 },
     { kind: 16, kindString: 'kind16', description: 'Generic Repost', category: 1 },
     { kind: 10000, kindString: 'kind10000', description: 'Mute List', category: 1 },
-    { kind: 10001, kindString: 'kind10001', description: 'Pin List', category: 1 },
-    { kind: 10002, kindString: 'kind10002', description: 'Relay List Metadata', category: 1 },
+    { kind: 10001, kindString: 'kind10001', description: 'Pinned Note(s)', category: 1 },
+    { kind: 10002, kindString: 'kind10002', description: 'Tiny Relay List', category: 1 },
     { kind: 1984, kindString: 'kind1984', description: 'Reporting', category: 1 },
-    { kind: 30000, kindString: 'kind30000', description: 'Follow List', category: 1 },
+    { kind: 30000, kindString: 'kind30000', description: 'Custom Follow List', category: 1 },
     { kind: 30008, kindString: 'kind30008', description: 'Profile Badge', category: 2 },
     { kind: 30009, kindString: 'kind30009', description: 'Badge Definition', category: 2 },
-    { kind: 30023, kindString: 'kind30023', description: 'Long-Form Content', category: 1 },
+    { kind: 30023, kindString: 'kind30023', description: 'Formatted Articles', category: 1 },
     { kind: 30079, kindString: 'kind30079', description: 'Event Paths', category: 1 },
-    { kind: 9734, kindString: 'kind9734', description: 'Lightning Zap Request', category: 2 },
-    { kind: 9735, kindString: 'kind9735', description: 'Lightning Zap Invoice Receipts', category: 2 },
+    //{ kind: 9734, kindString: 'kind9734', description: 'Lightning Zap Request', category: 2 },
+    { kind: 9735, kindString: 'kind9735', description: 'Zap Receipt', category: 2 },
     { kind: 10011, kindString: 'kind10011', description: 'Issue Notes', category: 3 },
     { kind: 10022, kindString: 'kind10022', description: 'PR Notes', category: 3 },
     { kind: 9803, kindString: 'kind9803', description: 'Commit Notes', category: 3 },
@@ -437,7 +437,8 @@ const RelaySettingsPage: React.FC = () => {
             <S.SwitchContainer
               style={{
                 display: 'grid',
-                gridTemplateColumns: '7rem 7rem',
+
+                gridTemplateColumns: '4.7rem 7rem',
                 marginBottom: '1.5rem',
               }}
             >
@@ -451,7 +452,7 @@ const RelaySettingsPage: React.FC = () => {
               />
             </S.SwitchContainer>
             <Collapse style={{ padding: '1rem 0 1rem 0', margin: '0 0 1rem 0' }} bordered={false}>
-              <StyledPanel header={'Network Settings'} key="protocol" className="centered-header">
+              <StyledPanel header={'Network Options'} key="protocol" className="centered-header">
                 <S.Card>
                   <BaseCol span={24}>
                     <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1rem' }}>
@@ -553,7 +554,7 @@ const RelaySettingsPage: React.FC = () => {
         <BaseCol xs={24}>
           <Collapse style={{ padding: '1rem 0 1rem 0', margin: '0 0 1rem 0' }} bordered={false}>
             <StyledPanel
-              header={settings.mode !== 'smart' ? `Blacklisted Nostr Kind Numbers` : 'Nostr Kind Numbers'}
+              header={settings.mode !== 'smart' ? `Blacklisted Kind Numbers` : 'Kind Numbers'}
               key="notes"
               className="centered-header"
             >
@@ -581,7 +582,7 @@ const RelaySettingsPage: React.FC = () => {
                         <h3 className="checkboxHeader w-full">{group.name}</h3>
                         <div className="custom-checkbox-group grid-checkbox-group large-label">
                           {group.notes.map((note) => (
-                            <div key={note.kindString}>
+                            <div className = "checkbox-container" key={note.kindString}>
                               <BaseCheckbox
                                 value={note.kindString}
                                 className={settings.mode === 'unlimited' ? 'blacklist-mode-active' : ''}
@@ -612,11 +613,11 @@ const RelaySettingsPage: React.FC = () => {
                   </BaseCheckbox.Group>
                   {settings.mode !== 'smart' && (
                     <div
-                      style={{ padding: '2rem 0rem 1rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}
+                      style={{ padding: '1.5rem 0rem 1rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}
                     >
                       <h3>{'Add to Blacklist'}</h3>
                       <div
-                        style={{ display: 'flex', paddingBottom: '1rem' }}
+                        style={{ display: 'flex', paddingBottom: '2.5rem' }}
                         className="custom-checkbox-group grid-checkbox-group large-label"
                       >
                         <Input
@@ -651,20 +652,20 @@ const RelaySettingsPage: React.FC = () => {
                             style={{ display: 'flex', flexDirection: 'row', gap: '.5rem', alignItems: 'center' }}
                             key={kind}
                           >
-                            <div>
+                            <div className='checkbox-container'>
                               <BaseCheckbox
                                 className={settings.mode === 'unlimited' ? 'blacklist-mode-active' : ''}
                                 value={kind}
                               />
                               <S.CheckboxLabel
                                 isActive={true}
-                                style={{ fontSize: '1.2rem', paddingRight: '.8rem', paddingLeft: '.8rem' }}
+                                style={{ fontSize: '1rem', paddingRight: '.8rem', paddingLeft: '.8rem' }}
                               >
-                                {kind}
+                                {`kind`+kind}
                               </S.CheckboxLabel>
                             </div>
                             <BaseButton
-                              style={{ height: '2rem', width: '5rem' }}
+                              style={{ height: '2rem', width: '5rem', marginRight:"1rem" }}
                               onClick={() => removeDynamicKind(kind)}
                             >
                               Remove
@@ -826,7 +827,7 @@ const RelaySettingsPage: React.FC = () => {
         <S.SwitchContainer
           style={{
             display: 'grid',
-            gridTemplateColumns: '5rem 7rem',
+            gridTemplateColumns: '5rem 6.5rem',
             marginBottom: '1.5rem',
             marginTop: '1rem',
           }}
@@ -841,7 +842,7 @@ const RelaySettingsPage: React.FC = () => {
           />
         </S.SwitchContainer>
         <Collapse style={{ padding: '1rem 0 1rem 0', margin: '0 0 1rem 0' }} bordered={false}>
-          <StyledPanel header={'Network Settings'} key="protocol" className="centered-header">
+          <StyledPanel header={'Network Options'} key="protocol" className="centered-header">
             <S.Card>
               <BaseCol span={24}>
                 <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1rem' }}>
@@ -950,7 +951,7 @@ const RelaySettingsPage: React.FC = () => {
 
         <Collapse style={{ padding: '1rem 0 1rem 0', margin: '0 0 1rem 0' }} bordered={false}>
           <StyledPanel
-            header={settings.mode !== 'smart' ? `Blacklisted Nostr Kind Numbers` : 'Nostr Kind Numbers'}
+            header={settings.mode !== 'smart' ? `Blacklisted Kind Numbers` : 'Kind Numbers'}
             key="notes"
             className="centered-header"
           >
@@ -977,7 +978,7 @@ const RelaySettingsPage: React.FC = () => {
                       <h3 className="checkboxHeader w-full">{group.name}</h3>
                       <div className="custom-checkbox-group grid-checkbox-group large-label">
                         {group.notes.map((note) => (
-                          <div key={note.kindString}>
+                          <div className='checkbox-container' style={{paddingLeft:".6rem"}} key={note.kindString}>
                             <BaseCheckbox
                               value={note.kindString}
                               className={settings.mode === 'unlimited' ? 'blacklist-mode-active' : ''}
@@ -1006,9 +1007,9 @@ const RelaySettingsPage: React.FC = () => {
                 </BaseCheckbox.Group>
               </div>
               {settings.mode === 'unlimited' && (
-                <div style={{ padding: '2rem 0rem 1rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
+                <div style={{ padding: '0rem 0rem .5rem 0rem', display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
                   <h3>{'Add to Blacklist'}</h3>
-                  <div style={{ display: 'flex', paddingBottom: '1rem' }}>
+                  <div style={{ display: 'flex', paddingBottom: '1.5rem', gap: ".5rem"}}>
                     <Input value={newKind} onChange={(e) => setNewKind(e.target.value)} placeholder="Enter new kind" />
                     <BaseButton
                       onClick={() => {
@@ -1025,7 +1026,7 @@ const RelaySettingsPage: React.FC = () => {
                     </BaseButton>
                   </div>
                   <BaseCheckbox.Group
-                    style={{ paddingLeft: '1rem' }}
+                    style={{ paddingLeft:".6rem" }}
                     className={`custom-checkbox-group grid-checkbox-group large-label ${
                       settings.mode === 'unlimited' ? 'blacklist-mode-active' : ''
                     }`}
@@ -1034,20 +1035,20 @@ const RelaySettingsPage: React.FC = () => {
                   >
                     {(settings.dynamicKinds || []).map((kind) => (
                       <div
-                        style={{ display: 'flex', flexDirection: 'row', gap: '.5rem', alignItems: 'center' }}
+                        style={{ display: 'flex', flexDirection: 'row', gap: '.5rem', alignItems: 'center', justifyContent:"space-between" }}
                         key={kind}
                       >
-                        <div>
+                        <div className='checkbox-container'>
                           <BaseCheckbox
-                            style={{ paddingLeft: '1rem' }}
+                            style={{ paddingLeft: '0rem' }}
                             className={settings.mode === 'unlimited' ? 'blacklist-mode-active' : ''}
                             value={kind}
                           />
                           <S.CheckboxLabel
                             isActive={true}
                             style={{ fontSize: '1.2rem', paddingRight: '.8rem', paddingLeft: '.8rem' }}
                           >
-                            {kind}
+                            {`kind`+kind}
                           </S.CheckboxLabel>
                         </div>
                         <BaseButton style={{ height: '2rem', width: '5rem' }} onClick={() => removeDynamicKind(kind)}>

src/pages/uiComponentsPages/UIComponentsPage.styles.ts

@@ -115,7 +115,7 @@ export const CheckboxLabel = styled.label<CheckboxLabelProps>`
 `;
 // Scaling up the BaseSwitch by increasing its dimensions
 export const LargeSwitch = styled(BaseSwitch)`
-  transform: scale(1.2); // Adjust the scale factor as needed
+  transform: scale(1.05); // Adjust the scale factor as needed
   transform-origin: center;
   & .modeSwitch{
    background-image: linear-gradient(to right,red,red), linear-gradient(to right,var(--background-color),var(--background-color));

src/styles/GlobalStyle.ts

@@ -258,13 +258,14 @@ export default createGlobalStyle`
   opacity:.75;
   }
   .checkboxHeader{
-    padding: 0rem 0 1.4rem 0;
+    padding: 0rem 0 .5rem 0;
   }
   .grid-checkbox-group {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 1.8rem;
+    column-gap: 1rem;
+    row-gap: 1.6rem;
   }
   .grid-mobile-checkbox-group{
   display: grid;
@@ -273,9 +274,16 @@ export default createGlobalStyle`
   gap: 1.2rem;
 
   }
+  .checkbox-container{
+    display: flex;
+    align-items: center;  
+    }
+  .checkbox-container{
+    white-space: nowrap;  
+  }
 
   .grid-checkbox-group.large-label {
-    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
   }
   .switch-container{
     padding-bottom: 1rem;