diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 9cf950ec6..2021b7c31 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)>
+<withPropsOnChange(Flex)
+  itemGutter={true}
+>
   <MatchMediaWithContext
     gteWidth="sm"
   >
@@ -30,6 +32,7 @@ exports[`renders correctly 1`] = `
       color="primary"
       onClick={[Function]}
       size="small"
+      variant="underlined"
     >
       Sign in
     </withPropsOnChange(Button)>
diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index c1fdd3d4c..d9c77ba58 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index d3310dc45..1c653ce93 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`loads more comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`loads more comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
@@ -232,10 +229,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -270,25 +267,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 38f7f0b8f..666eaa2a2 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -88,10 +88,10 @@ exports[`show all comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -126,25 +126,22 @@ exports[`show all comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 20124a5e6..18a0352be 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -52,10 +52,10 @@ exports[`show all comments 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -90,25 +90,22 @@ exports[`show all comments 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 009bbce70..5134fd802 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index f46ff9b5e..7ce338f55 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d010daaf3..27a76add0 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -17,10 +17,10 @@ exports[`renders comment stream 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -55,25 +55,22 @@ exports[`renders comment stream 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
@@ -212,10 +209,10 @@ exports[`show all replies 1`] = `
           className="Flex-root"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
           >
             <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -250,25 +247,22 @@ exports[`show all replies 1`] = `
               className="PostCommentForm-textarea"
               name="body"
               onChange={[Function]}
+              placeholder="Post a comment"
               value=""
             />
           </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
+          <button
+            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
+            Sign In and join the conversation
+          </button>
         </form>
         <div
           aria-live="polite"
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index a277de918..45486b121 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <input
-  className="TextField-root TextField-colorRegular custom"
+  className="TextField-root TextField-colorRegular TextField-fullWidth custom"
   defaultValue="Hello World"
   placeholder=""
 />