add link hover effect and make access-keys-table responsive

dbmi-bgm · Nov 11, 2024 · f228c3a · f228c3a
1 parent 1da4a7d
commit f228c3a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/src/encoded/static/components/app.js b/src/encoded/static/components/app.js
@@ -232,8 +232,8 @@ export default class App extends React.PureComponent {
                 'message' : (
                     <div>
                         <p className="mb-0">
-                            <a href="https://www.google.com/chrome/" rel="noopener noreferrer" target="_blank" className="text-500">Google Chrome</a>{' '}
-                            or <a href="https://www.mozilla.org/en-US/firefox/" rel="noopener noreferrer" target="_blank" className="text-500">Mozilla Firefox</a> are
+                            <a href="https://www.google.com/chrome/" rel="noopener noreferrer" target="_blank" className="text-500 link-underline-hover">Google Chrome</a>{' '}
+                            or <a href="https://www.mozilla.org/en-US/firefox/" rel="noopener noreferrer" target="_blank" className="text-500 link-underline-hover">Mozilla Firefox</a> are
                             the recommended browser(s) for using the 4DN Data Portal.
                         </p>
                         <p className="mb-0">

diff --git a/src/encoded/static/components/item-pages/CaseView/CaseSummaryTable.js b/src/encoded/static/components/item-pages/CaseView/CaseSummaryTable.js
@@ -315,7 +315,7 @@ export const CaseSummaryTable = React.memo(function CaseSummaryTable(props){
                             return (
                                 <React.Fragment key={`${ext}-${fileUrl}`}>
                                     <a href={ fileUrl } rel="noopener noreferrer" target="_blank"
-                                        className={`${statusToTextClass(quality)}`} data-tip={tooltips[0]}>
+                                        className={`link-underline-hover ${statusToTextClass(quality)}`} data-tip={tooltips[0]}>
                                         {i + 1}
                                     </a>
                                     { hasQm ?

diff --git a/src/encoded/static/components/item-pages/UserView.js b/src/encoded/static/components/item-pages/UserView.js
@@ -303,21 +303,23 @@ const AccessKeyTable = React.memo(function AccessKeyTable({ accessKeys, onDelete
     }
 
     return (
-        <table className="table access-keys-table bg-white">
-            <thead>
-                <tr>
-                    <th>Access Key ID</th>
-                    <th>Created</th>
-                    <th>Description</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                { accessKeys.map(function(accessKey, idx){
-                    return <AccessKeyTableRow {...{ onDelete, onResetSecret, accessKey, idx }} key={idx} />;
-                }) }
-            </tbody>
-        </table>
+        <div className="table-responsive-md">
+            <table className="table access-keys-table bg-white">
+                <thead>
+                    <tr>
+                        <th>Access Key ID</th>
+                        <th>Created</th>
+                        <th>Description</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {accessKeys.map(function (accessKey, idx) {
+                        return <AccessKeyTableRow {...{ onDelete, onResetSecret, accessKey, idx }} key={idx} />;
+                    })}
+                </tbody>
+            </table>
+        </div>
     );
 });
 

diff --git a/src/encoded/static/scss/encoded/_bootstrap-theme-overrides.scss b/src/encoded/static/scss/encoded/_bootstrap-theme-overrides.scss
@@ -361,4 +361,13 @@ a {
 			text-decoration: underline !important;
 		}
 	}
+}
+
+/**************************************
+ ************ Accordion ***********
+ **************************************/
+.accordion {
+	.card-header.btn {
+		border: 0 !important;
+	}
 }