Composer: More fixes for icons

src/components/middle/composer/ComposerEmbeddedMessage.scss

@@ -18,16 +18,20 @@
     display: flex;
     align-items: center;
     padding-right: 0.625rem;
-    padding-top: 0.45rem;
+    padding-top: 0.1875rem;
   }
 
   & > div > .Button {
     flex-shrink: 0;
     background: none !important;
-    width: 2.125rem;
+    width: 3.5rem;
-    height: 2.125rem;
+    height: 2.875rem;
-    margin: 0 0.625rem;
+    margin: 0 -0.0625rem 0 0;
     padding: 0;
     align-self: center;
+
+    @media (max-width: 600px) {
+      width: 2.875rem;
+    }
   }
 }

src/components/middle/composer/ComposerEmbeddedMessage.tsx

@@ -97,7 +97,7 @@ const ComposerEmbeddedMessage: FC<StateProps & DispatchProps> = ({
   return (
     <div className={className}>
       <div>
-        <Button round color="translucent" ariaLabel="Cancel replying" onClick={clearEmbedded}>
+        <Button round faded color="translucent" ariaLabel="Cancel replying" onClick={clearEmbedded}>
           <i className="icon-close" />
         </Button>
         <EmbeddedMessage

src/components/middle/composer/WebPagePreview.scss

@@ -14,11 +14,12 @@
     height: 0 !important;
   }
 
+  // TODO Remove duplication with `.ComposerEmbeddedMessage`
   & > div {
     display: flex;
     align-items: center;
     padding-right: 0.625rem;
-    padding-top: 0.45rem;
+    padding-top:  0.1875rem;
   }
 
   --accent-color: var(--color-primary);
@@ -30,11 +31,15 @@
   & > div > .Button {
     flex-shrink: 0;
     background: none !important;
-    width: 2.125rem;
+    width: 3.5rem;
-    height: 2.125rem;
+    height: 2.875rem;
-    margin: 0 0.625rem;
+    margin: 0 -0.0625rem 0 0;
     padding: 0;
     align-self: center;
+
+    @media (max-width: 600px) {
+      width: 2.875rem;
+    }
   }
 
   .WebPage {

src/components/middle/composer/WebPagePreview.tsx

@@ -100,7 +100,7 @@ const WebPagePreview: FC<OwnProps & StateProps & DispatchProps> = ({
   return (
     <div className={buildClassName('WebPagePreview', transitionClassNames)}>
       <div>
-        <Button round color="translucent" ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview}>
+        <Button round faded color="translucent" ariaLabel="Clear Webpage Preview" onClick={handleClearWebpagePreview}>
           <i className="icon-close" />
         </Button>
         <WebPage message={messageStub} inPreview />

src/components/ui/Button.scss

@@ -154,7 +154,7 @@
   }
 
   &.faded {
-    opacity: 0.75;
+    opacity: 0.8;
 
     @include active-styles() {
       opacity: 1;