refactor(website): minor fixes and improvements (#7119)

* refactor(website): minor fixes and improvements

* Some fixes

* Round all the corners in browser window

* Add rounded bottom corners to browser window

website/src/components/BrowserWindow/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
@@ -28,7 +29,9 @@ export default function BrowserWindow({
           <span className={styles.dot} style={{background: '#fbbe3c'}} />
           <span className={styles.dot} style={{background: '#58cb42'}} />
         </div>
-        <div className={styles.browserWindowAddressBar}>{url}</div>
+        <div className={clsx(styles.browserWindowAddressBar, 'text--truncate')}>
+          {url}
+        </div>
         <div className={styles.browserWindowMenuIcon}>
           <div>
             <span className={styles.bar} />

website/src/components/BrowserWindow/styles.module.css

@@ -7,8 +7,7 @@
 
 .browserWindow {
   border: 3px solid var(--ifm-color-emphasis-200);
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
+  border-radius: var(--ifm-global-radius);
   box-shadow: var(--ifm-global-shadow-lw);
   margin-bottom: var(--ifm-leading);
 }
@@ -77,5 +76,12 @@
 }
 
 .browserWindowBody {
+  background-color: var(--ifm-background-color);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
   padding: 1rem;
 }
+
+.browserWindowBody *:last-child {
+  margin-bottom: 0;
+}

website/src/components/Tweet/index.tsx

@@ -40,20 +40,20 @@ export default function Tweet({
             height="48"
             loading="lazy"
           />
-          <div className="avatar__intro">
-            <div className={styles.tweet}>
-              <div>
-                <strong>{name}</strong>{' '}
-                <span className={styles.tweetMeta}>@{handle}</span>
-              </div>
-            </div>
-            <div className="margin-bottom--sm">{content}</div>
-            <a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
-              {date}
-            </a>
+          <div className={clsx('avatar__intro', styles.tweetMeta)}>
+            <strong className="avatar__name">{name}</strong>
+            <span>@{handle}</span>
           </div>
         </div>
       </div>
+
+      <div className={clsx('card__body', styles.tweet)}>{content}</div>
+
+      <div className="card__footer">
+        <a className={clsx(styles.tweetMeta, styles.tweetDate)} href={url}>
+          {date}
+        </a>
+      </div>
     </div>
   );
 }

website/src/components/Tweet/styles.module.css

@@ -9,7 +9,10 @@
   font-size: 15px;
 }
 
-.tweetMeta,
-.tweetMeta:hover {
+.tweetMeta {
   color: var(--ifm-color-emphasis-700);
 }
+
+.tweetMeta strong {
+  color: var(--ifm-font-color-base);
+}

website/src/data/tweets.tsx

@@ -37,7 +37,7 @@ const TWEETS: TweetItem[] = [
     name: 'Maël',
     date: 'Jan 20, 2021',
     avatar:
-      'https://pbs.twimg.com/profile_images/1311259425949261825/7hPZqoJd_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1497225853931040769/5mXZAHFR_400x400.jpg',
     content: (
       <>
         I&apos;ve used Docusaurus for two websites this year, and I&apos;ve been
@@ -179,7 +179,7 @@ const TWEETS: TweetItem[] = [
     name: 'swyx',
     date: 'Jul 23, 2021',
     avatar:
-      'https://pbs.twimg.com/profile_images/1456506127961640962/iM2Hf8du_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1510319731466993664/tGoqnzGK_400x400.jpg',
     content: (
       <>
         Happy to share Temporal&apos;s first open source sponsorship — of{' '}

website/src/pages/index.tsx

@@ -54,7 +54,7 @@ function HeroBanner() {
             <Translate>Get Started</Translate>
           </Link>
           <Link className="button button--info" to="https://docusaurus.new">
-            <Translate>Playground</Translate>
+            <Translate>Try a Demo</Translate>
           </Link>
           <span className={styles.indexCtasGitHubButtonWrapper}>
             <iframe
@@ -194,8 +194,8 @@ function Feature({
       <img
         className={styles.featureImage}
         alt={feature.title}
-        width={feature.image.width}
-        height={feature.image.height}
+        width={Math.floor(feature.image.width)}
+        height={Math.floor(feature.image.height)}
         src={withBaseUrl(feature.image.src)}
         loading="lazy"
       />

website/src/pages/styles.module.css

@@ -106,6 +106,7 @@
   float: right;
   margin-top: 20px;
   padding: 0 20px 20px;
+  height: auto;
 }
 
 .indexCtas {
@@ -171,17 +172,20 @@
   }
 }
 
-.tweetsSection {
-  margin-top: -2rem;
-}
-
-.tweetsSection > :global(.col) {
-  padding-top: 2rem;
-  margin-top: -2rem;
-}
-
 .tweetsSection > :global(.col) > * {
-  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 996px) {
+  .tweetsSection > :global(.col:last-child) > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 997px) {
+  .tweetsSection > :global(.col) > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
 /* Used to test CSS insertion order */