smaller buttons

frontend/src/Call/CallPlayer.js

@@ -214,20 +214,20 @@ function CallPlayer(props) {
       <Menu fixed="bottom" inverted vertical fluid>
         <div className="item-container">
           <div className={autoplayClassName}  onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></div>
-          <div className="mediaplayer-item">
+          <div className="mediaplayer">
             <MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} />
           </div>
 
-          <div className="button-item desktop-only"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}>
+          {/* <div className="button-item desktop-only"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}>
             <ButtonContent visible color="red">
               <Icon name='heart' /> Donate
             </ButtonContent>
             <ButtonContent hidden>Thank You</ButtonContent>
-          </Button>} /></div>
-          <div className="button-item desktop-only" >
+          </Button>} /></div> */}
+          <div className="link-item desktop-only" >
             <a href={callDownload}><Icon name="download" />Download</a>
           </div>
-          <div className="button-item desktop-only">
+          <div className="link-item desktop-only">
             <a href={callLink}><Icon name="at" />Link</a>
           </div>
 

frontend/src/Call/components/MediaPlayer.css

@@ -26,14 +26,29 @@
     font-weight: bold;
     text-align: center;
   }
+  .mediaplayer {
+    flex-grow: 1;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+  }
   .mediaplayer-item {
-    
     padding: 9px 5px 5px 5px;
     flex-grow: 1;
     color: white;
     font-weight: bold;
     text-align: center;
   }
+  .link-item {
+    display: flex;
+  justify-content: center;
+  align-items: center;
+    padding: 5px;
+    width: 100px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+  }
   .button-item {
     cursor:pointer;
     display: flex;
@@ -43,12 +58,17 @@
     width: 100px;
     color: white;
     font-weight: bold;
-    text-align: center;
   }
   .active{
 background-color: #5c5c5c;
   }
 
+  .link-item a {
+
+    color: white;
+    text-align: center;
+}
+
 .button-item a {
 
     color: white;
@@ -59,7 +79,7 @@ background-color: #5c5c5c;
 
     .button-item {
 
-        width: 50px;
+        width: 40px;
         color: white;
 
       }

frontend/src/Call/components/MediaPlayer.js

@@ -137,14 +137,12 @@ const MediaPlayer = (props) => {
 
 
 
-      <div className="button-item">
-        <Button onClick={onPlayPause} floated='left'>
+      <div className="button-item" onClick={onPlayPause} >
           {
             isPlaying
               ? (<Icon name="pause" />)
               : (<Icon name="play" />)
           }
-        </Button>
       </div>
       <div className="mediaplayer-item">
 

nginx-proxy/prod/vhosts/site.template

@@ -48,6 +48,7 @@ server {
                 proxy_pass http://frontend:3000;
                 access_log off;
                 expires 1M;
+				add_header Surrogate-Control "public, max-age=2629746";  
                 add_header Cache-Control "max-age=2629746, public";
     }