fix: resolve aligment issues (#649) (#650)

* fix: resolve aligment issues (#649) Signed-off-by: KUNAL <goudanikunal3@gmail.com> * fix:Developer/Repo Header Issues Signed-off-by: KUNAL <goudanikunal3@gmail.com> --------- Signed-off-by: KUNAL <goudanikunal3@gmail.com>
hypertrons · Apr 19, 2023 · 2220a5b · 2220a5b
1 parent 0c04b25
commit 2220a5b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
@@ -21,20 +21,36 @@
   border-bottom: 0;
   border-radius: 6px;
 }
+.color-text-secondary {
+  margin-left: 35px;
+  margin-right: 35px;
+  margin-top: 10px;
+}
 @media screen and (max-width: 1120px) {
   .graph-container {
     width: 100%;
   }
   .description-container {
     width: 100%;
   }
+  .color-text-secondary {
+    margin-left: 5px;
+    margin-top: 5px;
+  }
 }
 
 .hypertrons-crx-title-extra {
+  float: right;
   margin-right: 10px;
   text-align: right;
 }
 
+@media screen and (max-width: 670px) {
+  .developer-tab {
+    float: none;
+  }
+}
+
 .verticalStackItemStyle {
   width: 50%;
   margin-left: 10px;

diff --git a/src/views/DeveloperNetworkView/DeveloperNetworkView.tsx b/src/views/DeveloperNetworkView/DeveloperNetworkView.tsx
@@ -161,14 +161,14 @@ const DeveloperNetworkView: React.FC<DeveloperNetworkViewProps> = ({
                   settings.locale
                 )}
               </span>
-              <div className="hypertrons-crx-title-extra">
+              <div className="hypertrons-crx-title-extra developer-tab">
                 {getMessageByLocale('global_period', settings.locale)}:{' '}
                 {repoPeriod} {getMessageByLocale('global_day', settings.locale)}
               </div>
             </Stack>
             <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
               <div className="col-8 graph-container">
-                <div style={{ margin: '10px 0 20px 20px' }}>
+                <div style={{ margin: '15px 0 20px 0px' }}>
                   <Graph
                     data={developerNetwork!}
                     style={graphStyle}
@@ -177,10 +177,7 @@ const DeveloperNetworkView: React.FC<DeveloperNetworkViewProps> = ({
                 </div>
               </div>
               <div className="col-4 description-container">
-                <div
-                  className="color-text-secondary"
-                  style={{ marginLeft: '35px', marginRight: '35px' }}
-                >
+                <div className="color-text-secondary">
                   <p>
                     {getMessageByLocale(
                       'component_developerCollaborationNetwork_description',
@@ -225,23 +222,20 @@ const DeveloperNetworkView: React.FC<DeveloperNetworkViewProps> = ({
                   settings.locale
                 )}
               </span>
-              <div className="hypertrons-crx-title-extra">
+              <div className="hypertrons-crx-title-extra ">
                 {getMessageByLocale('global_period', settings.locale)}:{' '}
                 {developerPeriod}{' '}
                 {getMessageByLocale('global_day', settings.locale)}
               </div>
             </Stack>
             <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
-              <div className="col-lg-8 col-12  ">
-                <div style={{ margin: '10px 0 20px 20px' }}>
+              <div className="col-lg-8 col-12 graph-container ">
+                <div style={{ margin: '15px 0px 20px 0px' }}>
                   <Graph data={repoNetwork!} style={graphStyle} />
                 </div>
               </div>
-              <div className="col-lg-4 col-12">
-                <div
-                  className="color-text-secondary"
-                  style={{ marginLeft: '35px', marginRight: '35px' }}
-                >
+              <div className="col-lg-4 col-12 description-container">
+                <div className="color-text-secondary ">
                   <p>
                     {getMessageByLocale(
                       'component_mostParticipatedProjects_description',