frontend: improve bitsurance in responsive mode

Author: thisconnect

frontends/web/src/routes/account/components/insuredtag.module.css

@@ -1,16 +1,15 @@
 .insured {
-    padding: 4px 10px;
-    border-radius: var(--space-half);
-    border: 1px solid;
-    font-size: var(--size-smaller);
-    line-height: 14px;
-    background: var(--color-palegreen);
-    border-color: var(--color-lightgreen);
-    color: var(--color-darkgreen);
-    margin: 0px 10px;
-    text-decoration: none;
-    white-space: nowrap;
-    max-height: 24px;
+  background: var(--color-palegreen);
+  border-radius: var(--space-half);
+  border: 1px solid;
+  border-color: var(--color-lightgreen);
+  color: var(--color-darkgreen);
+  font-size: var(--size-smaller);
+  margin: 0px 10px;
+  max-height: 2.4rem;
+  padding: .4rem 10px;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 .insured div {

frontends/web/src/routes/bitsurance/dashboard.module.css

@@ -16,7 +16,6 @@
 
 .button {
   font-size: var(--size-default);
-  height: calc(var(--space-default) + var(--space-quarter));
   padding: 0 24px;
 }
 
@@ -26,6 +25,16 @@
   margin-right: var(--space-quarter);
 }
 
+.externalLink {
+  align-items: baseline;
+  display: flex;
+}
+
+.externalLink img {
+  max-height: var(--size-default);
+  max-width: var(--size-default);
+}
+
 .coverageContainer {
   margin: var(--space-half) 0;
 }

frontends/web/src/routes/bitsurance/dashboard.tsx

@@ -50,16 +50,16 @@ type TInsurancesByCode = {
 const AccountStatusIcon = ({ status }: TAccountStatusIconProps) => {
   switch (status) {
   case 'active':
-    return <GreenDot width={14} height={20} />;
+    return <GreenDot width={14}/>;
   case 'processing':
   case 'waitpayment':
-    return <YellowDot width={14} height={20} />;
+    return <YellowDot width={14}/>;
   case 'refused':
-    return <RedDot width={14} height={20} />;
+    return <RedDot width={14}/>;
   case 'inactive':
-    return <OrangeDot width={14} height={20} />;
+    return <OrangeDot width={14}/>;
   case 'canceled':
-    return <RedDot width={14} height={20} />;
+    return <RedDot width={14}/>;
   }
 };
 
@@ -200,8 +200,8 @@ export const BitsuranceDashboard = ({ accounts }: TProps) => {
                                   className={`${style.text || ''} ${style.link || ''} m-top-quarter-on-small`}
                                   href={insurance.details.support}
                                 >
-                                  <div className="flex">
-                                    <ExternalLink width={16} />
+                                  <div className={style.externalLink}>
+                                    <ExternalLink />
                                     <span className="m-left-quarter">
                                       {t('bitsurance.dashboard.supportLink')}
                                     </span>