tweaking carousel

net/web/src/User/Conversation/AddTopic/AddCarousel/AddCarousel.jsx

@@ -17,7 +17,6 @@ export function AddCarousel({ state, actions }) {
   const [scrollRight, setScrollRight] = useState('hidden');
 
   const onLeft = () => {
-    console.log(itemIndex.current);
     if (itemIndex.current > 0) {
       itemIndex.current -= 1;
       setScroll();
@@ -25,7 +24,6 @@ export function AddCarousel({ state, actions }) {
   }
 
   const onRight = () => {
-    console.log(itemIndex.current);
     if(itemIndex.current + 1 < itemCount.current) {
       itemIndex.current += 1;
       setScroll();
@@ -33,7 +31,6 @@ export function AddCarousel({ state, actions }) {
   }
 
   const setScroll = () => {
-    console.log(">>", itemIndex.current);
     let pos = 0;
     for (let i = 0; i < itemIndex.current; i++) {
       pos += itemWidth.current.get(i) + 32;
@@ -69,9 +66,9 @@ export function AddCarousel({ state, actions }) {
           {({ width, height }) => {
             itemWidth.current.set(i, width);
             if (i % 2 == 0) {
-              return <div class="item"><img class="object" src={login} alt="" /></div>
+              return <div class="item noselect"><img class="object" src={login} alt="" /></div>
             }
-            return <div class="item"><img class="object" src={test} alt="" /></div>
+            return <div class="item noselect"><img class="object" src={test} alt="" /></div>
           }}
         </ReactResizeDetector>
       ));

net/web/src/User/Conversation/AddTopic/AddTopic.jsx

@@ -25,15 +25,12 @@ export function AddTopic() {
       <Menu.Item key="2">
         <div onClick={() => actions.addAudio()}>Attach Audio</div>
       </Menu.Item>
-      <Menu.Item key="3">
-        <div onClick={() => actions.addIframe()}>Embed Link</div>
-      </Menu.Item>
     </Menu>
   );
 
   return (
     <AddTopicWrapper>
-      <div class="container">
+      <div class="container noselect">
         <AddCarousel state={state} actions={actions} />
         <div class="input">
           <Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }}
@@ -42,20 +39,20 @@ export function AddTopic() {
         <div class="buttons">
           <div class="option">
             <Dropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topRight">
-              <Button icon={<PaperClipOutlined />} size="medium" />
+              <Button icon={<PaperClipOutlined />} size="large" />
             </Dropdown>
           </div>
           <div class="option">
-            <Button icon={<FontSizeOutlined />} size="medium" />
+            <Button icon={<FontSizeOutlined />} size="large" />
           </div>
           <div class="option">
-            <Button icon={<FontColorsOutlined />} size="medium" />
+            <Button icon={<FontColorsOutlined />} size="large" />
           </div>
           <div class="option">
-            <Button icon={<BgColorsOutlined />} size="medium" />
+            <Button icon={<BgColorsOutlined />} size="large" />
           </div>
           <div class="send">
-            <Button icon={<SendOutlined />} size="medium" />
+            <Button icon={<SendOutlined />} size="large" />
           </div>
         </div>
       </div>

net/web/src/User/Conversation/Conversation.jsx

@@ -32,9 +32,8 @@ export function Conversation() {
     >
       {({ measure, registerChild }) => (
         // 'style' attribute required to position cell (within parent List)
-        <div ref={registerChild} style={style}>
-<iframe width="560" height="315" src="https://www.youtube.com/embed/XX4VTIOtkPQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
+        <div class="noselect" ref={registerChild} style={style}>
+          TEST MESSAGE!!!
         </div>
       )}
     </CellMeasurer>

net/web/src/index.css

@@ -11,3 +11,13 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}