diff --git a/web/components/CodingSession/CodingSessionDescription.js b/web/components/CodingSession/CodingSessionDescription.js index 9992106..a8b855f 100644 --- a/web/components/CodingSession/CodingSessionDescription.js +++ b/web/components/CodingSession/CodingSessionDescription.js @@ -1,193 +1,202 @@ import React, { useState } from 'react' import _ from 'lodash' import Link from 'next/link' import dayjs from 'dayjs' import ProfilePicture from '../ProfilePicture' import ReactMarkdown from 'react-markdown' import LiveStatus from '../LiveStatus/BigLiveStatus.js' import ShareBox from './ShareBox' import LocalizedFormat from 'dayjs/plugin/localizedFormat' import { CodeBlocks } from './Commits' import dynamic from 'next/dynamic' import cn from 'classnames' import TagsWatch from '../Tags/watch' import Options from './Options' import { deleteCodingSession } from '../../services/api' import redirect from '../../services/redirect' const ChatBox = dynamic(() => import('../Chat/VideoChat'), {ssr: false}) dayjs.extend(LocalizedFormat) const LinkToProfile = ({user, children}) => { const username = _.get(user, 'username') if (!username) { return children } return

} const Title = ({title, isOwnCodingSession, onUpdate = () => {}}) => { const [editing, setEditing] = useState(false) const [newTitle, setNewTitle] = useState(title) if (!isOwnCodingSession) { return

{title}

} if (!editing) { return

setEditing(true)}>{newTitle}

} const submitNewTitle = () => { setEditing(false) onUpdate(newTitle) } const onKeyDown = ({key}) => key === 'Enter' && submitNewTitle() return setNewTitle(e.target.value)} autoFocus={true} onKeyDown={onKeyDown} /> } const Description = ({description, isOwnCodingSession, onUpdate = () => {}}) => { const [editing, setEditing] = useState(false) const [newDescription, setNewDescription] = useState(description) if (!isOwnCodingSession) { return

} if (!editing) { return

setEditing(true)}> {newDescription ? : - Add some description or summary to your video. + Here you can add more info about your video. Markdown accepted! }

} const submitNewDescription = () => { setEditing(false) onUpdate(newDescription) } return

setNewDescription(e.target.value)}/>
 }
 
 const onClickDelete = async id => {
   const confirmation = confirm('Are you sure you want to permanently delete this video?')
   if (!confirmation) {
     return
   }
 
   await deleteCodingSession(id)
   redirect(null, '/')
 }
 
 const CodingSessionDescription = (props) => {
   const {
     codeBlock, commit, parsedDiff, showNextButtons, hideDeleteButton,
     isNextDisabled, isPrevDisabled, goNextCommit, goPreviousCommit,
     isCommentsSelected, isEmbed, hideShareBox, isLive,
     isOwnCodingSession, thumbnailURL,
     visibility, title, description,
     createdDateTime, tags, user = {}, _id, organization = {},
     onUpdateTitle, onUpdateDescription, onUpdateVisibility,
     onClickStartRecording, onClickStopRecording, organizations,
-    onUpdateOrganization, organizationId, showStreamFromBrowser,
+    onUpdateOrganization, organizationId, showStreamFromBrowser, isNewVideo,
   } = props
 
   return <div className="container-fluid">
     <div className="row">
-      <div className="col-12 col-md-6 col-lg-8">
+      <div className={cn("col-12 ", isNewVideo ? 'col-12 col-lg-10 mx-auto' : 'col-md-6 col-lg-8')}>
         <div className="commit-profile-block">
           {isLive && !isOwnCodingSession && <span className="mr-3"><LiveStatus/></span>}
           {isOwnCodingSession && <Options
             visibility={visibility} isLive={isLive} onUpdateVisibility={onUpdateVisibility}
             hideDeleteButton={hideDeleteButton} onClickDelete={() => onClickDelete(_id)}
             onClickStartRecording={onClickStartRecording} onClickStopRecording={onClickStopRecording} title={title}
             description={description} organizations={organizations} onUpdateOrganization={onUpdateOrganization}
             organizationId={organizationId} showStreamFromBrowser={showStreamFromBrowser}
           />}
 
+  
+
+          {isNewVideo && <div className="video-options-block mb-5 mt-1">Install the VS Code extension if you want to automatically link your code to the video.<br/>
+                <Link href="/instructions/vscode"><button className="btn btn-md btn-secondary-outline mt-3"
+                                                    type="button">How to link the code</button></Link>
+          </div>}
+
+
+
           {/*<span className="project-name">Project name</span>*/}
           <Title title={title} isOwnCodingSession={isOwnCodingSession} onUpdate={onUpdateTitle}/>
 
           {user && <div>
             <div className="commit-profile-block-info">
               <LinkToProfile user={user}><span className="commit-profile-avatar"><ProfilePicture
                 user={user}/></span></LinkToProfile>
               <div className="d-flex">
                 <LinkToProfile user={user}>
                   <div className="commit-profile-avatar-link">@{user.username}</div>
                 </LinkToProfile>
 
                 {organization.username &&
                 <>
                   <LinkToProfile user={organization}><span className="commit-team-avatar">
                   <ProfilePicture user={organization}/></span></LinkToProfile>
                   <LinkToProfile user={organization}>
                     <div className="commit-profile-avatar-link">@{organization.username}</div>
                   </LinkToProfile>
                 </>}
 
                 <span
                   className="commit-info-timestamp align-self-center">Published on {dayjs(createdDateTime).format('ll').toString()}</span>
                 {visibility === 'private' &&
                 <span className="visibility-status ml-3">🙈<span className="mobile-hide"> Private</span></span>}
                 {visibility === 'team' &&
                 <span className="visibility-status ml-3">🔒<span className="mobile-hide"> Team</span></span>}
                 {visibility === 'public' &&
                 <span className="visibility-status ml-3">🌏<span className="mobile-hide"> Public</span></span>}
               </div>
             </div>
             {!hideShareBox && <div className="d-flex mt-3">
               <ShareBox title={title} username={user.username} id={_id}/>
             </div>}
           </div>}
           <TagsWatch tags={tags}/>
 
           <Description description={description} isOwnCodingSession={isOwnCodingSession}
                        onUpdate={onUpdateDescription}/>
         </div>
 
       </div>
       <div className="col-12 col-md-6 col-lg-4 commit-details-block mt-4">
         <CodeBlocks codeBlock={codeBlock} commit={commit} parsedDiff={parsedDiff}/>
 
         {showNextButtons && <div className="commit-control mb-3">
           <button onClick={goPreviousCommit} disabled={isPrevDisabled} className="btn btn-sm btn-secondary-outline mr-3"
                   type="button">Previous
           </button>
           <button onClick={goNextCommit} disabled={isNextDisabled} className="btn btn-sm btn-secondary-outline"
                   type="button">
             Next
           </button>
         </div>}
 
         <div className={cn('column-chat mobileTab', {showTab: isCommentsSelected})}>
           {!isEmbed && <ChatBox codingSessionId={_id} title={title} thumbnailURL={thumbnailURL}/>}
         </div>
 
 
       </div>
     </div>
 
     <div className="row"/>
   </div>
 }
 
 export default CodingSessionDescription
diff --git a/web/components/CodingSession/Options.js b/web/components/CodingSession/Options.js
index 21768c9..3baa084 100644
--- a/web/components/CodingSession/Options.js
+++ b/web/components/CodingSession/Options.js
@@ -1,126 +1,126 @@
 import IconDelete from '../../assets/img/icons/DeleteIconShape'
 import LiveStatus from '../LiveStatus/BigLiveStatus.js'
 import StreamFromBrowser from '../StreamFromBrowser'
 import { BrowserStreamContext } from '../StreamFromBrowser/Context'
 import React, { Fragment } from 'react'
 import IconRecord from '../../assets/img/icons/RecordIconShape'
 import IconCircleShape from '../../assets/img/icons/CircleIconShape'
 
 const RadioOptions = ({name, selectedValue, onChange, options = []}) => options.length > 0 &&
   <div className="custom-controls-stacked">
     <div>
       {options.map(option => <div key={`opt-${option.name}-${option.value}`} className="custom-control custom-radio">
         <label>
           <input name={name} type="radio" checked={selectedValue === option.value} value={option.value}
                  onChange={() => onChange(option.value)}/>
           <span className="ml-1">{option.text}</span>
         </label>
       </div>)}
     </div>
   </div>
 
 const Visibility = ({visibility = 'public', isTeam, teamName, onChange}) => {
   const options = [
-    {value: 'public', text: '🌎 Public (anyone)'},
+    {value: 'public', text: '🌎 Public (anyone can watch)'},
     {value: 'private', text: '🙈 Private (only you)'},
   ]
 
   if (isTeam) {
     options.unshift({value: 'team', text: '🔒 Team (only team can watch)'})
   }
 
   return <>
-    <div>Who can watch it?</div>
+    <div>Video visibility</div>
     <RadioOptions name="visibility" selectedValue={visibility} onChange={onChange} options={options}/>
   </>
 }
 
 const TeamOptions = ({organizations = [], organizationId, onChange}) => {
   if (organizations.length === 0) {
-    return null
+    return <div><div className="mb-0">Team</div><div className="small">You are not part of any team. Create a team to be able to share coding videos with them.</div></div>
   }
   if (!organizationId) {
     organizationId = 'none'
   }
 
   const options = [
     {
       value: 'none',
-      text: 'None',
+      text: 'No team',
     },
     ...organizations.map(org => ({
       value: org.id,
       text: org.username,
     }))
   ]
 
   return <>
-    <div>Is this part of a team?</div>
+    <div>Team</div>
     <RadioOptions name="organization" selectedValue={organizationId} onChange={onChange} options={options}/>
   </>
 }
 
 const InputOptions = () => <Fragment>
   <div className="col">
     <div>Microphone</div>
     <RadioOptions name="microphone" options={[{value: 'on', text: 'On'}, {value: 'off', text: 'Off'}]}/>
   </div>
   <div className="col">
     <div>Front Camera</div>
     <RadioOptions name="camera" options={[{value: 'on', text: 'On'}, {value: 'off', text: 'Off'}]}/>
   </div>
 </Fragment>
 
 const Options = (props) => {
   const {
     visibility, organizationId,
     onUpdateOrganization, isLive, hideDeleteButton, title,
     description, showStreamFromBrowser,
     onClickDelete, organizations, onUpdateVisibility = () => {}
   } = props
 
   return <div className="video-options-block">
     <BrowserStreamContext.Consumer>
       {({step}) => (showStreamFromBrowser || step === 'streaming') && <StreamFromBrowser
         StartButton={({onClick}) => <button className="btn btn-xl btn-main mr-3"
                                             type="button" onClick={onClick}>
         <span
           className="btn-icon-link mr-2"><IconRecord/></span>Start recording
         </button>}
         StopButton={({onClick}) => <button className="btn btn-lg btn-danger mr-3" type="button" onClick={onClick}>
         <span
           className="btn-icon-link mr-2"><IconCircleShape/></span>Stop recording
         </button>}
         LoadingButton={() => <button className="btn btn-lg btn-secondary-outline disabled mr-3">Accept permissions</button>}
         title={title}
         description={description}
         visibility={visibility}
         organizationId={organizationId}
       />
       }
     </BrowserStreamContext.Consumer>
 
 
 
     {!hideDeleteButton && <button className="btn btn-sm btn-danger-secondary float-right" onClick={onClickDelete}
                                   type="button"><span className="btn-icon-link"><IconDelete/></span></button>}
 
     {isLive && <span className="mr-3 mb-3"><LiveStatus/></span>}
 
     <div className="btn btn-lg invisble disabled"></div>
 
     <hr/>
 
     <div className="row">
       <div className="col">
         <Visibility visibility={visibility} onChange={onUpdateVisibility}
                     isTeam={organizationId && organizationId !== 'none'}/>
       </div>
       <div className="col">
         <TeamOptions organizations={organizations} organizationId={organizationId} onChange={onUpdateOrganization}/>
       </div>
     </div>
   </div>
 }
 
 export default Options
diff --git a/web/components/CodingSession/index.js b/web/components/CodingSession/index.js
index 962360b..6f19b8c 100644
--- a/web/components/CodingSession/index.js
+++ b/web/components/CodingSession/index.js
@@ -1,305 +1,305 @@
 import React from 'react'
 import _ from 'lodash'
 import { parseDiff } from 'react-diff-view'
 import * as crypto from 'crypto'
 import dynamic from 'next/dynamic'
 import DiffsViewer from './DiffsViewer'
 import cn from 'classnames'
 import VideoPlayer from '../VideoPlayer'
 import { connect } from 'react-redux'
 import {
   fetchCurrentOrganizationsIfNeeded,
   setCodingSessionMetadata
 } from '../../actions'
 import { updateCodingSessionMetadata } from '../../services/api'
 import { getThumbnailURL } from '../../utils'
 
 const CodingSessionDescription = dynamic(() => import('./CodingSessionDescription'))
 
 const addIfIsEmbedClass = (str, isEmbed, isIframe) => {
   if (isIframe) {
     return str + '-iframe'
   }
   if (isEmbed) {
     return str + '-embed'
   }
 
   return str
 }
 
 const createRawCommitFromSnippet = snippet => `diff --git a/${snippet.path} b/${snippet.path}\n` +
   'new file mode 100644\n' +
   `index 0000000..${Math.round(Math.random() * 10000000)}\n` +
   `--- /dev/null\n+++ b/${snippet.path}\n` +
   `@@ -0,0 +${snippet.fromLine},${snippet.toLine} @@\n` +
   snippet.code.split('\n').map(x => '+ ' + x).join('\n')
 
 const createCodeBlocks = (commits, snippets) => {
   const codeBlocks = []
 
   const mapSnippet = snippet => ({...snippet, type: 'snippet', rawCommit: createRawCommitFromSnippet(snippet)})
 
   let i = 0, j = 0
   while (i < commits.length && j < snippets.length) {
     if (commits[i].videoTimestamp < snippets[j].videoTimestamp) {
       codeBlocks.push({...commits[i], type: 'commit'})
       ++i
     } else {
       codeBlocks.push(mapSnippet(snippets[j]))
       ++j
     }
   }
 
   if (i < commits.length) {
     codeBlocks.push(...commits.slice(i).map(x => ({...x, type: 'commit'})))
   }
 
   if (j < snippets.length) {
     codeBlocks.push(...snippets.slice(j).map(mapSnippet))
   }
 
   return codeBlocks
 }
 
 const uuidV4 = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
   (c ^ crypto.randomBytes(1)[0] & 15 >> c / 4).toString(16)
 )
 
 const activeTabs = {
   video: 'video',
   code: 'code',
   comments: 'comments',
 }
 
 class CodingSession extends React.Component {
   state = {
     videoURLs: this.props.codingSession.videos.map(x => ({src: x.url})),
     currentCodeBlockIndex: 0,
     playbackSessionId: uuidV4(),
     codeBlocks: [],
     activeTab: activeTabs.video,
   }
 
   constructor (props) {
     super(props)
     this.videoRef = React.createRef()
   }
 
   onVideoLoadedMetadata = () => {
     const videoRef = this.videoRef.current
     // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=642012
     if (videoRef.duration === Infinity) {
       videoRef.currentTime = Number.MAX_SAFE_INTEGER
       videoRef.ontimeupdate = () => {
         videoRef.ontimeupdate = null
         videoRef.onplay = () => {
           videoRef.currentTime = 0
           videoRef.onplay = null
         }
         videoRef.currentTime = 0
       }
     }
   }
 
   goNextCommit = () => {
     const {currentCodeBlockIndex, codeBlocks} = this.state
     if (currentCodeBlockIndex + 1 < codeBlocks.length) {
       this.setState({
         currentCodeBlockIndex: currentCodeBlockIndex + 1,
       }, () => {
         const newTime = _.get(this.state, `codeBlocks.${this.state.currentCodeBlockIndex - 1}.videoTimestamp`, 0)
         if (this.videoRef.current.updateVideoTime) {
           this.videoRef.current.updateVideoTime(newTime)
         }
       })
     }
   }
 
   goPreviousCommit = () => {
     const {currentCodeBlockIndex} = this.state
     if (currentCodeBlockIndex - 1 >= 0) {
       this.setState({
         currentCodeBlockIndex: currentCodeBlockIndex - 1,
       }, () => {
         const newTime = _.get(this.state, `codeBlocks.${this.state.currentCodeBlockIndex - 1}.videoTimestamp`, 0)
         if (this.videoRef.current.updateVideoTime) {
           this.videoRef.current.updateVideoTime(newTime)
         }
       })
     }
   }
 
   onVideoTimeUpdated = (currentTime) => {
     const {currentCodeBlockIndex, codeBlocks} = this.state
 
     if (codeBlocks.length < 2) {
       return
     }
 
     const prevCommitTime = _.get(codeBlocks, `${currentCodeBlockIndex - 1}.videoTimestamp`)
     const currentCommitTime = _.get(codeBlocks, `${currentCodeBlockIndex}.videoTimestamp`)
 
     if (currentTime < prevCommitTime && currentCodeBlockIndex - 1 >= 0) {
       this.setState({
         currentCodeBlockIndex: currentCodeBlockIndex - 1
       })
     } else if (currentTime > currentCommitTime && currentCodeBlockIndex + 1 < codeBlocks.length) {
       this.setState({
         currentCodeBlockIndex: currentCodeBlockIndex + 1
       })
     }
   }
 
   updateSessionMetadata = ({title, visibility, description, organizationId}) => {
     const {setCodingSessionMetadata, codingSession} = this.props
     if (organizationId === 'none') {
       organizationId = null
     }
     const id = codingSession._id
     const newVisibility = codingSession.visibility === 'team' && organizationId === null ? 'public' : visibility
     const payload = {
       ...(title && {title}),
       ...(newVisibility && {visibility: newVisibility}),
       ...(description && {description}),
       ...(organizationId !== undefined && {organizationId}),
     }
     setCodingSessionMetadata({id, ...payload})
     updateCodingSessionMetadata(id, payload).catch(console.error)
   }
 
   componentDidMount () {
     const {commits, snippets} = this.props.codingSession
     this.setState({codeBlocks: createCodeBlocks(commits, snippets)})
     this.props.fetchCurrentOrganizationsIfNeeded().catch(console.error)
   }
 
   render () {
     const {onVideoLoadedMetadata, goNextCommit, goPreviousCommit, updateSessionMetadata} = this
 
     const {codingSession, autoplay, isEmbed, isIframe, currentUser, currentOrganizations} = this.props
     const {currentCodeBlockIndex, codeBlocks, activeTab} = this.state
 
     const commit = _.get(codeBlocks[currentCodeBlockIndex], 'type') === 'commit' && codeBlocks[currentCodeBlockIndex]
     const codeBlock = codeBlocks[currentCodeBlockIndex]
     const hasCommit = !!commit
 
     const showNextButtons = codeBlocks.length > 1
     const isNextDisabled = currentCodeBlockIndex + 1 >= codeBlocks.length
     const isPrevDisabled = currentCodeBlockIndex - 1 < 0
 
     const parsedFullDiff = hasCommit && parseDiff(commit.rawCommitFull)
 
     const parsedDiff = codeBlocks.length > 0 && parseDiff(codeBlock.rawCommit).map(diff => {
       if (codeBlock.type === 'snippet') {
         return diff
       }
       const fullDiff = parsedFullDiff.find(({oldRevision, newRevision}) =>
         oldRevision === diff.oldRevision && newRevision === diff.newRevision)
 
       if (!fullDiff) {
         return diff
       }
 
       return {
         ...diff,
         oldSource: ['modify', 'rename'].includes(fullDiff.type) && fullDiff.hunks
           .reduce((res, hunk) => {
             return res.concat(hunk.changes)
           }, [])
           .filter(change => change.type !== 'insert')
           .map(change => change.content)
           .join('\n')
       }
     })
 
     const isVideoSelected = activeTab === activeTabs.video
     const isCodeSelected = activeTab === activeTabs.code
     const isCommentsSelected = activeTab === activeTabs.comments
 
     const isOwnCodingSession = currentUser && currentUser.lowercaseUsername === _.get(codingSession, 'user.lowercaseUsername', '')
 
     return <main className="main-content">
       {!isEmbed && <>
         <div className="space-block"/>
         <div className="mobileTabControl">
-          <ul className="nav nav-pills mb-3" id="pills-tab" role="tablist">
+          <ul className="nav nav-pills" id="pills-tab" role="tablist">
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.video})}
                  className={cn('nav-link', {active: isVideoSelected})} id="pills-profile-tab" data-toggle="pill"
                  role="tab"
                  aria-controls="pills-profile" aria-selected={isVideoSelected}>Video</a>
             </li>
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.code})}
                  className={cn('nav-link', {active: isCodeSelected})} id="pills-profile-tab" data-toggle="pill"
                  role="tab"
                  aria-controls="pills-profile" aria-selected={isCodeSelected}>Code</a>
             </li>
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.comments})}
                  className={cn('nav-link', {active: isCommentsSelected})} id="pills-contact-tab" data-toggle="pill"
                  role="tab" aria-controls="pills-contact" aria-selected={isCommentsSelected}>Chat</a>
             </li>
           </ul>
         </div>
       </>}
 
 
       <div className={'container-fluid ' + addIfIsEmbedClass('watch-commit-container', isEmbed, isIframe)}>
         <div className="row no-gutters">
           {parsedDiff && <div className={cn('column-code mobileTab', {showTab: isCodeSelected})}>
             <DiffsViewer parsedDiff={parsedDiff} isEmbed={isEmbed} isIframe={isIframe}/>
           </div>}
           <div className={cn(addIfIsEmbedClass('column-video', isEmbed), 'mobileTab', {showTab: isVideoSelected})}>
             <div className="video-block">
               <VideoPlayer
                 autoplay={autoplay}
                 ref={this.videoRef}
                 sessionId={this.state.playbackSessionId}
                 contentId={codingSession._id}
                 controls
                 onLoadedMetadata={onVideoLoadedMetadata}
                 sources={this.state.videoURLs}
                 onTimeUpdate={this.onVideoTimeUpdated}
               />
             </div>
           </div>
           {/* <div className={cn('column-chat mobileTab', {showTab: isCommentsSelected})}>
             {!isEmbed && <ChatBox codingSession={codingSession}/>}
           </div> */}
         </div>
       </div>
 
       {!isEmbed && <div className={cn('mobileTab', {showTab: isVideoSelected})}>
         <CodingSessionDescription isEmbed={isEmbed} isCommentsSelected={isCommentsSelected}
                                   codingSession={codingSession} commit={commit} codeBlock={codeBlock}
                                   parsedDiff={parsedDiff} showNextButtons={showNextButtons}
                                   isNextDisabled={isNextDisabled} isPrevDisabled={isPrevDisabled}
                                   goNextCommit={goNextCommit} goPreviousCommit={goPreviousCommit}
                                   isLive={codingSession.status === 'streaming'} isOwnCodingSession={isOwnCodingSession}
                                   onUpdateTitle={title => updateSessionMetadata({title})}
                                   onUpdateDescription={description => updateSessionMetadata({description})}
                                   onUpdateVisibility={visibility => updateSessionMetadata({visibility})}
                                   onUpdateOrganization={organizationId => updateSessionMetadata({organizationId})}
                                   thumbnailURL={getThumbnailURL(codingSession)} organizations={currentOrganizations}
                                   {...codingSession}
         />
       </div>}
 
 
       {!isEmbed && <div className="space-block"/>}
     </main>
   }
 }
 
 const mapState = ({currentUser}) => ({
   currentUser: currentUser.user,
   currentOrganizations: currentUser.organizations,
 })
 
 const mapActions = {
   setCodingSessionMetadata: setCodingSessionMetadata,
   fetchCurrentOrganizationsIfNeeded: fetchCurrentOrganizationsIfNeeded,
 }
 
 export default connect(mapState, mapActions)(CodingSession)
diff --git a/web/components/Header/index.js b/web/components/Header/index.js
index 6e40948..4050649 100644
--- a/web/components/Header/index.js
+++ b/web/components/Header/index.js
@@ -1,243 +1,246 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import GitDuckLogo from '../../assets/img/gitduck-logo-h-light-alpha@1x.svg'
 import GitDuckLogoIcon from '../../assets/img/gitduck-icon-light-alpha@1x.svg'
 import IconMessage from '../../assets/img/icons/MessageIconShape'
 import IconMenu from '../../assets/img/icons/MenuIconShape'
 import { connect } from 'react-redux'
 import { login } from '../../services/auth'
 import { setShowChat } from '../../actions'
 import { getOrCreateChatClient } from '../../services/chat'
 import { showBetaFeature } from '../../services/featureFlag'
 import cn from 'classnames'
 import { logout } from '../../services/auth'
 import dynamic from 'next/dynamic'
 import LiveStatus from '../LiveStatus/BigLiveStatus.js'
 import IconCircleShape from '../../assets/img/icons/CircleIconShape'
 import IconPlus from '../../assets/img/icons/PlusIconShape'
 import IconProfileOutline from '../../assets/img/icons/ProfileIconOutline'
 import IconTeamOutline from '../../assets/img/icons/TeamIconOutline'
 import IconInstructionsOutline from '../../assets/img/icons/InstructionsIconOutline'
 import IconFaqOutline from '../../assets/img/icons/FaqIconOutline'
 import IconLogoutOutline from '../../assets/img/icons/LogoutIconOutline'
 import ProfilePicture from '../ProfilePicture'
 
 const StreamFromBrowser = dynamic(() => import('../StreamFromBrowser'), {ssr: false})
 
 setTimeout(async () => {
   if (process.browser && showBetaFeature()) {
     const chatClient = await getOrCreateChatClient()
   }
 }, 3000)
 
 const isHidden = {
   visibility: 'hidden',
 }
 
 /* this is side menu that only shows in desktop when you are logged in */
 const DesktopMenu = ({isAuthenticated, currentUsername, unreadMessages, hideUsername, toggleShowDesktopMenu}) =>
   <div onMouseLeave={toggleShowDesktopMenu} className="dropdown-usermenu">
     <nav className="nav nav-lead flex-column">
       {isAuthenticated && currentUsername && !hideUsername &&
       <Link href={`/profile?username=${currentUsername}`} as={`/${currentUsername}`}><a
         className="dropdown-usermenu-link"><span
         className="btn-icon-link mr-2"><IconProfileOutline/></span>Your profile</a></Link>
       }
       {isAuthenticated && <Link href="/teams"><a className="dropdown-usermenu-link"><span
         className="btn-icon-link mr-2"><IconTeamOutline/></span>Your teams</a></Link>}
       <hr/>
       <Link href="/instructions" prefetch={false}><a className="dropdown-usermenu-link"><span
         className="btn-icon-link mr-2"><IconInstructionsOutline/></span>Instructions</a></Link>
       <Link href="/faq" prefetch={false}><a className="dropdown-usermenu-link"><span
         className="btn-icon-link mr-2"><IconFaqOutline/></span>FAQ</a></Link>
       <hr/>
       {isAuthenticated && <div onClick={logout} className="dropdown-usermenu-link"><span
         className="btn-icon-link mr-2"><IconLogoutOutline/></span>Logout</div>}
     </nav>
   </div>
 
 const MobileMenu = ({isAuthenticated, ShowMobileMenu, currentUsername, toggleShowMobileMenu, unreadMessages, hideUsername, showChat}) =>
   <div id="offcanvas-right" style={isHidden}
        className={cn('menu-sidebar offcanvas bg-alternate3 w-300', {show: ShowMobileMenu})} data-animation="slide-left">
     <button type="button" className="close position-static px-0" onClick={toggleShowMobileMenu} aria-label="Close">
       <span aria-hidden="true">×</span>
     </button>
 
     <nav className="nav nav-lead flex-column my-7">
 
       {isAuthenticated && currentUsername && !hideUsername &&
       <Link href={`/profile?username=${currentUsername}`} as={`/${currentUsername}`}><a
         className="small nav-link nav nav-navbar">@{currentUsername}</a></Link>
       }
 
       {isAuthenticated && showBetaFeature() && <span className="nav-link" onClick={() => setShowChat(!showChat)}>
           Messages
         {unreadMessages > 0 && <span className="chat-notify-badge">{unreadMessages}</span>}
       </span>}
       <br/>
       <Link href="/live-coding"><a className="nav-link">Coding Videos</a></Link>
       {isAuthenticated && <Link href="/teams"><a className="nav-link">Your teams</a></Link>}
       {!isAuthenticated && <Link href="/remote-teams"><a className="nav-link">Teams</a></Link>}
       <Link href="/instructions" prefetch={false}><a className="nav-link">Instructions</a></Link>
       <Link href="/faq" prefetch={false}><a className="nav-link">FAQ</a></Link>
       <Link href="/about" prefetch={false}><a className="nav-link">About</a></Link>
 
       <Link href="/blog" prefetch={false}><a className="nav-link">Blog</a></Link>
       <br/>
 
       {!isAuthenticated && <div className="nav-link" onClick={() => {
         login({redirectURL: window.location.pathname})
       }}>
         Login
       </div>}
 
       {!isAuthenticated &&
       <Link href="/onboarding" prefetch={false}><a className="btn btn-md btn-main mt-5">Sign up</a></Link>}
 
+      {isAuthenticated && <div onClick={logout} className="nav-link"><span
+        className=""></span>Logout</div>}
+
 
     </nav>
   </div>
 
 const Header = ({isAuthenticated, currentUser, streamKey, hideUsername, unreadMessages, setShowChat, showChat}) => {
   const [ShowMobileMenu, setShowMobileMenu] = useState(false)
   const [ShowDesktopMenu, setShowDesktopMenu] = useState(false)
   const toggleShowMobileMenu = () => setShowMobileMenu(!ShowMobileMenu)
   const toggleShowDesktopMenu = () => setShowDesktopMenu(!ShowDesktopMenu)
   const [showLive, setShowLive] = useState(false)
 
   const currentUsername = currentUser.username
 
   const MessageButton = isAuthenticated &&
     <div className="header-icon-link">
       <IconMessage/>
     </div>
 
   return <React.Fragment>
     <MobileMenu isAuthenticated={isAuthenticated} ShowMobileMenu={ShowMobileMenu}
                 toggleShowMobileMenu={toggleShowMobileMenu}
                 currentUsername={currentUsername} unreadMessages={unreadMessages} hideUsername={hideUsername}
                 showChat={showChat}
     />
     
     <nav className="navbar navbar-expand-md navbar-dark navbar-default" data-navbar="fixed">
       <div className="container-fluid">
         <div className="navbar-left">
 
           {/* Mobile only */}
           <div className="navbar-toggler">
             {/*  <div className="header-icon-link mr-3"><IconMenu/></div> */}
             <div className="navbar-brand nav nav-navbar">
               <Link href="/"><a><img className="logo-link" title="Quack!" src={GitDuckLogoIcon}
                                      alt="GitDuck"/></a></Link>
             </div>
           </div>
 
         </div>
 
         {/* Mobile only */}
         <section className="d-flex d-md-none">
           {/* Show mobile menu */}
           {isAuthenticated && currentUsername && !hideUsername &&
           <Link href={`/profile?username=${currentUsername}`} as={`/${currentUsername}`}><a
             className="nav-link nav nav-navbar">@{currentUsername}</a></Link>
           }
           <nav onClick={toggleShowMobileMenu} className="nav-link nav nav-navbar">
 
             <div className="header-icon-link"><IconMenu/></div>
 
           </nav>
         </section>
 
 
         {/* Desktop only */}
         <section className="navbar-mobile">
           <div className="navbar-brand admin-mobile-hide">
             <Link href="/">
               <img className="item-link" src={GitDuckLogo} alt="GitDuck"/>
             </Link>
           </div>
           <nav className="nav nav-navbar mr-auto admin-mobile-hide">
             <Link href="/live-coding"><a className="nav-link">Coding Videos</a></Link>
             {isAuthenticated && <Link href="/teams"><a className="nav-link">Teams</a></Link>}
             {!isAuthenticated && <Link href="/remote-teams"><a className="nav-link">Teams</a></Link>}
            
 
 
             {/* isAuthenticated &&
             <Link href="/instructions" prefetch={false}><a className="nav-link">Instructions</a></Link> */}
             {/* {!isAuthenticated && <Link href="/faq" prefetch={false}><a className="nav-link">FAQ</a></Link>} */}
             {isAuthenticated && showBetaFeature() && <a className="nav-link" onClick={() => setShowChat(!showChat)}>
               Messages
               {unreadMessages > 0 && <span className="chat-notify-badge-inline">{unreadMessages}</span>}
             </a>}
             {/* {!isAuthenticated && <Link href="/about" prefetch={false}><a className="nav-link">About</a></Link>} */}
             {!isAuthenticated && <Link href="/blog" prefetch={false}><a className="nav-link">Blog</a></Link>}
           </nav>
 
           <nav className="nav nav-navbar admin-mobile-hide">
             {!isAuthenticated && <div className="nav-link link">
               <button className="btn btn-md btn-outline-main mr-3" type="button"
                       onClick={() => {
                         login({redirectURL: window.location.pathname})
                       }}>
                 Login
               </button>
               <Link href="/onboarding" prefetch={false}><a className="btn btn-md btn-main">Sign up</a></Link>
             </div>}
 
             {showLive && <div className="nav-link link">
               <span className=""><LiveStatus/></span>
             </div>}
 
             {isAuthenticated && <div className="nav-link link">
               <StreamFromBrowser
                 streamPath={`/stream/${streamKey}`}
                 onStart={() => setShowLive(true)}
                 onStop={() => setShowLive(false)}
                 StartButton={({onClick}) => <Link href="/new-video"><button className="btn btn-md btn-secondary"
                                                     type="button"><span
                   className="btn-icon-link mr-2"><IconPlus/></span>New video</button></Link>}
                   LoadingButton={() => <button className="btn btn-md btn-secondary-outline disabled mr-3">Accept permissions</button>}
                 StopButton={({onClick}) => <button onClick={onClick} className="btn btn-md btn-danger"
                                                    type="button"><span
                                                    className="btn-icon-link mr-2"><IconCircleShape/></span>Recording</button>}
               />
             </div>}
           </nav>
 
           {isAuthenticated && currentUsername && !hideUsername &&
           <Link href={`/profile?username=${currentUsername}`} as={`/${currentUsername}`}><a
             className="small nav-link nav nav-navbar">@{currentUsername}</a></Link>
           }
 
           
 
           {isAuthenticated && <nav onClick={toggleShowDesktopMenu} className="nav nav-navbar">
 
             {/* <div className="header-icon-link"><IconMenu/></div> */}
             <div className="small avatar-navbar"><ProfilePicture user={currentUser}/></div> 
             
 
           </nav>}
           {ShowDesktopMenu && <DesktopMenu isAuthenticated={isAuthenticated} currentUsername={currentUsername}
                                            ShowDesktopMenu={ShowDesktopMenu}
                                            toggleShowDesktopMenu={toggleShowDesktopMenu}
                                            unreadMessages={unreadMessages}/>}
         </section>
       </div>
     </nav>
   </React.Fragment>
 }
 
 const mapState = ({auth, currentUser, chat, menu}) => ({
   isAuthenticated: auth.isAuthenticated,
   currentUser: currentUser.user,
   streamKey: currentUser.user.streamKey,
   showChat: chat.showChat,
   unreadMessages: chat.unreadMessages,
 })
 const actions = {
   setShowChat,
 }
 
 export default connect(mapState, actions)(Header)
diff --git a/web/components/Page/index.css b/web/components/Page/index.css
index fe1e8b3..7dbf217 100644
--- a/web/components/Page/index.css
+++ b/web/components/Page/index.css
@@ -1,3083 +1,3078 @@
 
 
 .navbar-brand img {
     max-height: 28px;
 }
 
 .navbar {
     top:0!important;
 }
 
 .navbar-default {
 
     border-bottom: 1px solid var(--bg-stroke-color);
     background-color: var(--bg-color);
 }
 
 .feature-list {
     cursor: pointer;
 }
 
 .feature-list .more-info{
     background-color: #eceff2;
     width: 20px;
     height: 20px;
     display: inline-block;
     border-radius: 100px;
     line-height: 20px;
     font-size: 75%;
 }
 
 
 .category-list {
     padding: 4px 12px;
     background-color: #f0e9ff;
     color: #8a65d7;
     border-radius: 5px;
     display: inline-block;
     margin-bottom: 4px;
     font-weight: 500;
 }
 
 .category-list-space {
     padding: 4px 12px;
     background-color: transparent;
     color: transparent;
     border-radius: 5px;
     display: inline-block;
     margin-bottom: 4px;
     font-weight: 500;
 }
 
 .transparent-space {
     color: transparent;
 }
 
 .pricing-3 hr {
     margin: 1rem;
     margin-bottom: 1rem;
 }
 
 .pricing-4 {
     -webkit-box-align: center;
     align-items: center;
     color: inherit;
     border: none;
     border-radius: 10px;
     background-color: white;
     padding: 20px 10px 10px 40px;
 }
 
 .pricing-4 .plan-name {
     text-transform: uppercase;
     font-weight: 600;
     font-size: 0.8325rem;
     letter-spacing: 1px;
     opacity: .9;
 }
 
 .plan-price {
     font-size: 100%
 }
 
 .pricing-4 .plan-price h3 {
     font-weight: 500;
     font-size: 1.8rem;
     padding-top: 1rem; }
 
 
 .pricing-3:hover, .pricing-3:focus {
     -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.06);
     box-shadow: 0 0 15px rgba(0,0,0,0.06);
     }
 
 .bg-pricing {
     background-color: #f8f4ff !important;
 }
 
 body {
     font-weight: 300;
     color: var(--gray-dark);
 
 }
 
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     color: var(--gray-dark);
 
 }
 
 .section-header small {
     opacity: 0.5;
     color: inherit;
 }
 
 a.footer-links {
     color: var(--gray-dark);
 }
 
 .brutal-illustration {
     height: 80vh;
 }
 @media (max-width: 991px) {
 
     .brutal-illustration {
         height: 45vh;
     }
 }
 
 .bg-light-purple {
     background-color: var(--purple-light) !important;
     color: var(--purple-dark) !important;  }
 
 
 
 .space-block {
     height: 85px;
 }
 
 .half-space-block {
     height: 50px;
 }
 
 .text-features {
     font-size: 1rem;
     font-weight: 300;
     line-height: 150%;
     text-align: left;
 }
 
 .title-features {
     font-weight: 700;
 }
 
 .duck-icon {
     height: 38px;
     display: inline-flex;
 
     align-self: self-end;
     margin-top: -5px;
 }
 
 .partner-icon {
     width: 50px;
 }
 
 #code-left {
     min-height: 100vh;
     height: 100%;
     overflow: auto;
     padding-top: 80px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 100px;
 }
 
 @media (max-width: 992px) {
     #code-left {
       width: auto; } }
 
 
 #video-right {
     width: 50%;
     min-height: 100vh;
     height: 100%;
     overflow: scroll;
     padding-top: 150px;
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 100px;
     position: fixed;
     right: 0;
     border-left: 2px solid #d5c3fa;
 }
 
 
 .column-video, .column-video-embed {
     flex: 1 1 auto;
 }
 
 .column-video .video-block .video-js {
     height: 540px!important;
     padding-top: initial!important;
     background-color: var(--dark);
     background-color: black;
 }
 
 .column-video-embed .video-block .video-js {
     height: 100vh;
     background-color: var(--dark);
 }
 
 .watch-commit-container {
     padding-right: 0px!important;
     padding-left: 0px!important;
     height: 540px;
     background-color: var(--dark);
     margin-top: -20px;
 
     border-radius: 10px;
     overflow: hidden;
     width: calc(100% - 30px)!important;
     margin-top: 0px;
 }
 
 .watch-commit-container-embed {
     padding-right: 0px!important;
     padding-left: 0px!important;
     height: 500px;
     background-color: var(--dark);
 }
 .watch-commit-container-iframe {
     padding-right: 0px!important;
     padding-left: 0px!important;
     height: 100%;
     background-color: var(--dark);
 }
 
 .watch-commit-container .row, .watch-commit-container-embed .row, .watch-commit-container-iframe .row {
     height: 100%;
     align-items: center;
 }
 
 .column-code {
     height: 100%;
     display: contents;
 }
 
 .column-chat {
     height: 100%;
     display: contents;
 }
 
 .code-block {
     font-size: 100%;
     font-family: monospace;
     color: var(--secondary-type-color);
     z-index: 10;
     width: 100%;
     height: 100%;
     overflow-x: auto;
     margin: 0px;
     opacity:1;
     margin-left: 0px;
     overflow: hidden;
     pointer-events: initial;
 }
 
 .code-block-embed {
     font-size: 100%;
     font-family: monospace;
     color: var(--secondary-type-color);
     z-index: 10;
     width: 100%;
     height: inherit;
     overflow-x: auto;
     margin: 0px;
     opacity:1;
     margin-left: 0px;
     overflow: hidden;
     pointer-events: initial;
     align-self: baseline;
 }
 
 .code-block2 {
     font-size: 100%;
     font-family: monospace;
     color: var(--dark);
     z-index: 10;
     background-color: var(--secondary-bg-color);
 }
 
 .code-block-header {
     width: 100%;
     background-color: var(--secondary-bg-color);
     background-color: black;
     height: auto;
     color: var(--secondary-type-color);
     padding-left: 10px;
     display: flex;
     align-items: center;
     word-break: break-word;
     padding-top: 10px;
     padding-bottom: 10px;
     /* codehover */
     opacity: 0.5;
     transition: all 1.0s;
 }
 
 .code-scroll {
     overflow-y: scroll;
     overflow-x: hidden;
     border-right: 4px solid var(--bg-color);
     /* border-bottom: 10px solid var(--type-color);
     border-image: url(../CodingSession/images/border-pattern2.png);
     border-image-slice: 17 17;
     border-image-repeat: repeat;*/
     height: 100%;
     background-color: var(--dark);
     background-color: black;
     
 }
 
 table.diff {
     background-color: var(--dark);
     background-color: black;
     width: 100%;
 }
 
 .diff-line {
     /* cursor: pointer; */
 }
 
 .diff-code {
     transition: all 1.0s;
 }
 
 .code-block:hover .diff-code {
     opacity: 1;
 }
 
 .code-block .diff-code {
     /* codehover*/
     opacity: 0.5;
 }
 
 .code-block-embed .diff-code {
     /* codehover*/
     opacity: 1;
 }
 
 
 
 tbody.diff-hunk {
     padding-left: 10px;
 }
 
 .diff-line:hover .diff-gutter-normal, .diff-line:hover .diff-code-normal {
     /* color: var(--main-action-color); */
 }
 
 .diff-line:hover .diff-gutter-delete {
     /*  opacity: 0.8; */
 }
 
 .diff-line:hover .diff-code-delete {
     /*  opacity: 0.8; */
 }
 
 .diff-line:hover .diff-gutter-insert {
    /*  opacity: 0.8; */
 }
 
 .diff-line:hover .diff-code-insert {
     /* opacity: 0.8; */
 }
 
 .diff-gutter {
     /* codehover*/
     opacity: 0.5;
     transition: all 1.0s;
 }
 
 .code-block:hover .diff-gutter,
 .code-block:hover .diff-gutter-delete,
 .code-block:hover .diff-gutter-insert,
 .code-block:hover .diff-gutter-select,
 .code-block-embed:hover .diff-gutter,
 .code-block-embed:hover .diff-gutter-delete,
 .code-block-embed:hover .diff-gutter-insert,
 .code-block-embed:hover .diff-gutter-select {
     opacity: 1;
     color: inherit;
 }
 
 .code-block:hover .diff-expand,
 .code-block-embed:hover .diff-expand {
     opacity: 1;
 }
 
 .code-block:hover .code-block-header,
 .code-block-embed:hover .code-block-header {
     opacity: 1;
 }
 
 .diff-expand {
     border: 1px solid var(--secondary-type-color);
     border-radius: 200px;
     padding: 0px 5px 5px 5px;
     cursor: pointer;
     margin-left: 6px;
     margin-top: 2px;
     /* codehover*/
     opacity: 0.5;
     transition: all 1.0s;
 }
 
 .diff-expand:hover {
     border-color: var(--main-action-color);
     color: var(--main-action-color);
 }
 
 
 .code-block-content {
     font-size: 80%;
     margin-right: -1px;
 }
 
 .code-block-content2 {
     font-size: 80%;
 }
 
 .code-block-container {
     transition: all 0.8s;
     font-size: 100%;
     font-family: monospace;
     color: var(--dark);
     position: relative;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0px;
     padding-top: 0px;
     pointer-events: none;
 }
 
 .code-block-container2 {
     transition: all 0.8s;
     font-size: 100%;
     font-family: monospace;
     color: var(--dark);
     border-left: 0px solid var(--bg-stroke-color);
     position: relative;
 }
 
 .code-block:hover, .code-block-embed:hover {
     /* background-color: var(--white); */
     /* -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2); */
     opacity: 1!important;
     /* margin-left: 0%!important; */
     color: var(--type-color);
 
 }
 
 .code-block-container2:hover .code-block2 {
     /* background-color: var(--white); */
     /* -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2); */
     opacity: 1!important;
     /* margin-left: 0%!important; */
 
 }
 
 #code-left #video-float:hover + .code-block-container .code-block{
 
     /* margin-left: calc(-100% + 8px); */
 
 
 }
 
 
 #code-left #video-float2:hover + .code-block-container2 .code-block2{
 
 }
 
 .code-block-content div {
     width: 100%;
     display: inline-flex;
     white-space: pre;
 
 }
 
 .code-block-content2 div {
     width: 100%;
     display: inline-flex;
     white-space: pre;
 
 }
 
 video::-webkit-media-controls-panel {
     background-image: none !important;
     filter: brightness(0.4);
  }
 
 .line-block {
     color: var(--type-color);
     margin-right: 30px;
 }
 
 .removed {
     background-color: var(--bg-removed);
     width:100%;
 
 }
 
 .added {
     background-color: var(--bg-added);
     width:100%;
 
 }
 
 .line {
     width: 100%;
 }
 
 
 .footer {
     z-index: 100;
 }
 
 .logo-code img {
     height: 38px;
 }
 
 .item-link {
     cursor: pointer;
 }
 
 .video-wrapper {
     border: 1px solid #d6d8e0;
     border-radius: 4px;
     background-color: black;
 }
 
 .added:hover, .added-replay {
     cursor: pointer;
     background-color: var(--bg-active-added);
     width: 100%;
 }
 
 .removed:hover, .removed-replay  {
     cursor: pointer;
     background-color: var(--bg-active-removed);
     width: 100%;
 }
 
 .line:hover, .line-replay  {
     cursor: pointer;
     background-color: #f8f6ff;
     width: 100%;
 }
 
 .line-block-space {
     color: #b3b6be;
     margin-right: 30px;
     border: 1px solid #ccc;
     border-radius: 12px;
     width: 30px;
     text-align: center;
     padding-bottom: 3px;
     padding-top: 0px;
     margin-bottom: 5px;
     margin-top: 5px;
     margin-left: -4px;
 }
 
 .line-block-space:hover {
     cursor: pointer;
 }
 
 img.language-icon {
     width: 50px;
     margin-bottom: 30px;
 
 }
 
 .explore-language-icon {
     width: 100px;
     margin-bottom: 20px;
 }
 
 img.developer-avatar {
     width:100%;
     margin-left: auto;
     margin-right: auto;
     border-radius: 10px;
 }
 
 .developer-block {
     font-size: 90%;
 }
 
 .developer-name {
     display: block;
     overflow: hidden;
     height: 20px;
     margin-bottom: 4px;
 }
 
 .developer-description {
     display: block;
     font-weight: 500;
     max-height: 54px;
     overflow-y: hidden;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     line-height: 18px;
 }
 
 .card {
     min-height: 320px;
 }
 
 .card:hover {
     cursor:pointer;
     -webkit-box-shadow: 0px 5px 30px 1px rgba(0,0,0,0.1);
     -moz-box-shadow: 0px 5px 30px 1px rgba(0,0,0,0.1);
     box-shadow: 0px 5px 30px 1px rgba(0,0,0,0.1);
 }
 
 .commit-title {
     margin-bottom: 0;
 }
 
 
 .commit-details-avatar {
     margin-right: 10px;
     flex-shrink: 0;
 }
 
 .commit-details-avatar img{
     border-radius: 2px;
     width: 40px;
 }
 
 .status-details-avatar {
     margin-right: 10px;
     flex-shrink: 0;
 }
 
 .status-details-avatar img{
     border-radius: 5px;
     width: 70px;
 }
 
 .commit-details-block {
     width: 100%;
     word-break: break-word;
 }
 
 .commit-description-block {
     padding-bottom: 20px;
     margin-bottom: 20px;
     word-wrap: break-word;
 }
 
 .commit-description-block-edit-mode {
     padding-bottom: 20px;
     margin-bottom: 20px;
     word-wrap: break-word;
     padding: 10px;
     border-radius: 10px;
     cursor: pointer;
     border: 2px dashed var(--secondary-bg-color);
 }
 
 h1.edit-mode {
     margin-bottom: 0;
     padding: 10px;
     border-radius: 10px;
     cursor: pointer;
     border: 2px dashed var(--secondary-bg-color);
 }
 
 h1.edit-mode:hover, .commit-description-block-edit-mode:hover {
     border: 2px dashed var(--secondary-type-color);
     background-color: var(--secondary-bg-color);
 }
 
 .input-edit-mode {
     width: 100%;
     padding: 10px;
     color: var(--dark);
     border-radius: 10px;
     border: 0px;
 }
 
 .description-placeholder {
     color: var(--secondary-type-color);
 }
 
 .commit {
     background-color: var(--secondary-bg-color);
     padding: 20px;
     border-radius: 10px;
 }
 
 .commit h4 {
     margin-bottom: 0px;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
     background-color: var(--third-bg-color);
     margin-top: 0px;
     font-size: inherit;
 }
 
 
 .commit-details-title, .status-details-title {
     display: block;
     font-weight: 500;
     max-height: 36px;
     overflow-y: hidden;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     line-height: 18px;
 }
 
 .commit-details-author, .status-details-author {
     display: block;
     overflow: hidden;
     height: 20px;
 }
 
 .commit-video-details {
     display: flex;
     margin-top: 10px;
     font-size: 90%;
 }
 
 .status-details {
     display: flex;
     margin-top: 10px;
     font-size: 90%;
 }
 
 .section-header {
     margin-bottom: 50px;
 }
 
 .discover-card-commit:hover {
     cursor: pointer;
 }
 
 .commit-switch-code-video {
     float: right;
     z-index: 999;
     position: relative;
 }
 
 #video-float {
     position: absolute;
     transition: all 0.5s;
     margin-top: 40px;
     overflow: hidden;
     border: 1px solid var(--dark-color);
     width: 100%;
     right: 0px;
     border-radius: 0;
 }
 
 .mobileTabControl {
     justify-content: center;
     margin-top: -40px;
     display: none;
     background-color: var(--bg-color);
     position: fixed;
     width: 100%;
     z-index: 1200;
     border-bottom: 1px solid var(--bg-stroke-color);
 }
 
 .mobile-show {
     display: none;
 }
 
 @media only screen and (max-width: 640px) {
     #video-float {
         position: fixed;
         width: 100%;
         left: 0px;
         margin-bottom: 20px;
         border-radius: 0px;
         margin-top: 0px;
         z-index: 999;
         top: 70px;
 
     }
 
     .mobile-hide {
         display: none;
     }
 
     .mobile-show {
         display: block;
     }
 
 
     .column-video {
         position: absolute;
         width: 100%;
         left: 0px;
         margin-bottom: 20px;
         border-radius: 0px;
         margin-top: 0px;
         z-index: 999;
-        top: 92px;
+        top: 81px;
         height:240px;
         pointer-events: none;
     }
 
     .column-video.showTab {
         pointer-events: initial;
     }
 
     .watch-commit-container {
       background-color: transparent;
         height: 100%;
         border-radius: 0px;
         width: 100%!important;
+        margin-top: -4px;
     }
 
     .commit-profile-block {
         margin-top: 250px!important;
         padding-bottom: 30px!important;
     }
 
     .commit-description-block {
         margin-bottom: 0px;
     }
 
     .commit-switch-code-video {
         display: none;
     }
 
     .code-block, .code-block-embed {
        /*  width: 100% !important;
         max-width: 100% !important;
         height: auto !important;*/
         max-height: unset!important;
         min-height: unset!important;
         border-radius: 0px;
 
     }
 
     .code-block-content {
         font-size:100%;
     }
 
     .code-block-header, .diff-added, .diff-removed, .diff-type-modify, .diff-type-rename, .diff-type-copy, .diff-branch, .timestamp, .diff-file {
         font-size: 1rem!important;
     }
 
     .diff-file {
         font-size: inherit;
         margin-top: 5px;
     }
 
     .diff-gutter, .code-block-header, .diff-expand {
         opacity: 0.7;
     }
 
     .code-block-container {
         width: 100vw;
 
     }
 
     .code-block .code-scroll {
         border: 0px;
     }
 
     .code-block-embed .code-scroll {
         border: 0px;
         background-color: var(--dark);
         border-right: 2px solid var(--main-action-color);
     }
 
 
     .navbar {
         padding: 0px!important;
     }
 
     .column-chat {
         /* display:none; */
     }
 
     .column-chat .chat-block {
-        top: 97px!important;
+        top: 81px!important;
         position: fixed!important;
         user-select: auto!important;
         max-width: 100%!important;
         width: 100%!important;
         max-height: unset!important;
         min-height: unset!important;
         box-sizing: border-box;
         z-index: 1000;
-        height: calc(100% - 97px)!important;
+        height: calc(100% - 81px)!important;
         border-left: 0px solid var(--main-action-color);
         margin-top: 0;
+        border-radius: 0;
     }
 
     .mobileTab > .code-block, .mobileTab > .video-block,
     .mobileTab > .chat-block, .mobileTab .commit-profile-block  {
         display: none;
     }
 
     .showTab > .code-block, .showTab > .video-block, .showTab > .chat-block,
     .showTab .commit-profile-block {
         display: block;
         width: 100%!important;
         max-width: 100%!important;
     }
 
     .mobileTabControl {
         display: flex;
     }
 
     .watch-commit-container-iframe .column-code {
         display: block;
         height: 100%;
         position: absolute;
     }
     .watch-commit-container-iframe .column-video-embed {
         display: block!important;
     }
 
     .share-button-small {
         display: none;
     }
 
   }
 
 
 
 .video-top {
     z-index: 999;
     -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
     -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
     box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5);
 }
 
 .code-bottom {
     -webkit-box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.0);
     -moz-box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.0);
     box-shadow: 5px 5px 4px 0px rgba(0,0,0,0.0);
     opacity: 0.4;
     cursor: pointer;
 }
 
 #video-float2 {
     position: absolute;
     right: 40px;
     width: 400px;
     z-index: 99;
     height: 300px;
 }
 
 #video-float2 .video-js {
     height: 300px;
 }
 
 #video-block {
     position: relative;
     width: 100%;
     left: 50%;
     transform: translateX(-50%);
     transition: all 0.5s;
     margin-top: 0px;
 }
 
 #video-float video, #video-block video {
     width: 100%;
     cursor: pointer;
 }
 
 #video-float2 video, #video-block video {
     width: 100%;
     cursor: pointer;
 }
 
 
 .diff-details {
 
 }
 
 .diff-added {
     background-color: var(--bg-added);
     color: #5b8f5b;
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 }
 
 .diff-removed {
     background-color: var(--bg-removed);
     color: #aa3232;
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 }
 
 
 
 .diff-file {
     font-size: 0.65rem;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
     background-color: var(--third-bg-color);
     cursor: pointer;
 }
 
 .diff-file:hover {
     color: var(--main-action-color);
 }
 
 blockquote {
     border-left: 3px solid var(--type-color);
     padding-left: 10px;
 }
 
 
 .diff-branch {
     background-color: #e8f8fa;
     color: #03A9F4;
     font-size: 80%;
     padding: 2px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
 }
 
 .secondbranch {
     background-color: #e8f8fa;
     color: #03A9F4;
     font-size: 80%;
     padding: 2px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-top: 5px;
 }
 
 .timestamp {
     font-size: 0.65rem;
 }
 
 h1.commit-title{
     margin-bottom: 5px;
     line-height: 120%;
 }
 
 a .commit-profile-avatar-link:hover {
     color: var(--main-action-color);
 }
 
 a .commit-profile-avatar-link {
     color: var(--secondary-type-color);
     margin-right: 10px;
 }
 
 .commit-profile-avatar img {
     height: 20px;
     margin-right: 10px;
     border-radius: 4px;
 }
 
 .project-profile-avatar img {
     height: 40px;
     margin-right: 10px;
     border-radius: 4px;
 }
 
 .commit-team-avatar img {
     height: 20px;
     margin-right: 10px;
     border-radius: 4px;
 }
 
 .profile-team-member-avatar img {
     height: 60px;
     border-radius: 4px;
 }
 
 .profile-team-block-feature .profile-team-member-avatar img {
     height: 120px!important;
     border-radius: 4px;
 }
 
 .profile-team-member-avatar:hover {
     opacity: 0.6;
 }
 
 .profile-team-member, .profile-teams-joined {
     margin-bottom: 10px;
     display: inline-flex;
     margin-right: 10px;
 }
 
 .profile-teams-joined .profile-team-member-avatar img {
     height: 40px;
     border-radius: 4px;
 }
 
 .diff-type-add {
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 
     background-color: #e8f8fa;
     color: olivedrab;
 }
 
 .diff-type-copy {
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 
     background-color: #e8f8fa;
     color: orange;
 }
 
 .diff-type-delete {
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 
     background-color: #e8f8fa;
     color: red;
 }
 
 .diff-type-modify {
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 
     background-color: #e8f8fa;
     color: #03A9F4;
 }
 
 .diff-type-rename {
     font-size: 80%;
     padding: 0px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
 
     background-color: #e8f8fa;
     color: purple;
 }
 
 .visibility-status {
     border-radius: 3px;
     font-weight: 600;
     display: inline-block;
     align-self: baseline;
     margin-right: 5px;
     text-align: center;
     white-space: nowrap;
     background-color: var(--secondary-bg-color);
     padding: 2px 8px;
 }
 
 .link {
     cursor: pointer;
 }
 
 .modal {
 
     color: var(--gray-dark);
 }
 
 @media (min-width: 992px) {
     .modal-xl {
       max-width: 1140px!important; } }
 
 .bg-modal {
     background-color: #000000ad;
     width: 100vw;
     position: fixed;
     height: 100vh;
     top: 0;
     left: 0;
     z-index: -1;
 }
 
 
 
 .temp-header {
     display: block;
     margin-left: 20px;
     margin-top: 40px;
 }
 
 input.form-control:invalid {
     border-color: red;
 }
 
 .input-error {
     color: #84282d;
     background-color: #ffdadc;
     padding: 4px;
     font-size: 90%;
     border-radius: 2px;
 }
 
 
 
 .video-code-home-block {
     position: relative;
     width:100%;
 }
 
 @media only screen and (max-width: 640px)  {
     .video-code-home-block {
         overflow-x: hidden;
     }
 }
 
 .video-code-home-landing {
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.9);
     border-radius: 5px;
     overflow: hidden;
     width:100%;
     position: relative;
     margin-top: 30px;
     cursor: pointer;
 
 }
 
 .video-code-home-center {
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.9);
     border-radius: 5px;
     overflow: hidden;
     width:100%;
     z-index: 10;
     transition:  1s all;
     position: relative;
     top:0;
     left: 0px;
     right: 0px;
 }
 
 .video-code-home-left {
 
     opacity: 0.3;
     width: 100%;
     position: absolute;
     left: -70px;
     border-radius: 5px;
     overflow: hidden;
     transition:  1s all;
     top: 50px;
     z-index: 2;
     pointer-events: none;
 }
 
 .video-code-home-right {
     opacity: 0.3;
     width: 100%;
     position: absolute;
     right: -70px;
     border-radius: 5px;
     overflow: hidden;
     transition:  1s all;
     top: 50px;
     z-index: 3;
     pointer-events: none;
 }
 
 .video-code-home-left:hover, .video-code-home-right:hover {
     opacity: 1;
 }
 
 .video-code-home-control-right {
     width: 100px;
     height: 100%;
     right: -70px;
     position: absolute;
     top: 50px;
     cursor: pointer;
 }
 
 .video-code-home-control-left {
     width: 100px;
     height: 100%;
     left: -70px;
     position: absolute;
     top: 50px;
     cursor: pointer;
 }
 
 .video-code-home-control-right:hover ~ .video-code-home-right, .video-code-home-control-left:hover ~ .video-code-home-left {
     opacity: 0.8;
 }
 
 .video-mp4-embed, .image-embed {
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5);
     border-radius: 6px;
 }
 
 .modal-success {
     text-align: center;
     margin-bottom: 80px;
     margin-top: 80px;
 }
 
 .modal-code-block {
     background-color: #f8fdff;
     border: 1px solid var(--bg-stroke-color);
     display: inline-block;
     border-radius: 6px;
     padding: 4px 8px;
     color: var(--bg-color);
 }
 
 .modal-code-block-prefix {
     color: #6e7fa1;
 }
 
 img.onboarding-profile {
     max-width: unset!important;
     margin-top: -80px;
 }
 
 img.landing-bleed-image {
     max-width: unset!important;
 }
 
 .landing-bleed-image:hover, .landing-full-image:hover {
     opacity: 0.8;
 }
 
 img.landing-full-image {
     border-radius: 20px;
 }
 
 @media (max-width: 576px) {
     img.onboarding-profile {
         margin-top: 0px;
     }
     .mobile-full-width-btn {
         width: 100%;
     }
 
     img.landing-bleed-image {
         max-width: 100%!important;
     }
 
     .page-button-edit {
         position: relative!important;
         margin-bottom: 30px!important;
         width: 100%;
     }
 }
 
 .onboarding-IDE {
     width: 120px;
     cursor: pointer;
     border: 1px solid var(--bg-stroke-color);
     background-color: var(--secondary-bg-color);
     border-radius: 4px;
     height: 100px;
     padding: 10px;
     margin: 0px 20px 20px 0px;
 }
 
 .onboarding-IDE-disabled {
     width: 120px;
     border: 1px solid var(--dark);
     border-radius: 4px;
     height: 100px;
     padding: 10px;
     opacity: 0.5;
     margin: 0px 20px 20px 0px;
     filter: grayscale(1);
 }
 
 .onboarding-IDE:hover {
     background-color: var(--dark);
     transition: 0.3s all;
     border: 1px solid black;
 }
 
 .onboarding-IDE img, .onboarding-IDE-disabled img {
     width: 40px;
 }
 
 .small-icon-IDE {
     width: 32px;
 }
 
 .IDE-disabled {
     opacity: 0.2;
     cursor: initial;
 }
 
 .logo-onboarding {
     width: 40px;
     margin-bottom: 20px;
 }
 
 .logo-footer{
     width: 25px;
     opacity: 0.5;
     filter: contrast(0%);
     cursor:pointer;
 }
 
 .logo-footer:hover {
     width: 25px;
     opacity: 1;
     filter: contrast(100%);
     transition: 0.3s ease;
 }
 
 .center-vw {
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
 
  .force-90vh {
     min-height: 90vh;
  }
 
  .link-style {
      cursor: pointer;
  }
 
 .bg-alternate {
     background-color: var(--secondary-bg-color);
 }
 
 .bg-alternate2 {
     background-color: var(--third-bg-color);
 }
 
 .bg-alternate3 {
     background-color: var(--fourth-bg-color);
 }
 
 .bg-dark {
     background-color: var(--dark);
 }
 
 .bg-alternate .close, .bg-alternate2 .close, .bg-alternate3 .close, .bg-dark .close {
     color: var(--type-color);
 }
 
 .bg-alternate .close:hover, .bg-alternate2 .close:hover, .bg-alternate3 .close:hover, .bg-dark .close:hover {
     color: var(--main-action-color);
 }
 
 .landing-top-section {
     margin-bottom: -50px;
     border-bottom: 1px solid var(--bg-stroke-color);
 }
 
 .avatar-profile img {
     border-radius: 10px;
     width: 500px;
 }
 
 .avatar-navbar img {
     border-radius: 6px;
     width: 32px;
     cursor: pointer;
 }
 
 .profile-main-block {
     padding: 0px;
 
     margin-bottom: 30px;
     border-bottom: 1px solid var(--bg-stroke-color);
     padding-bottom: 10px;
 }
 
 @media only screen and (max-width: 576px)  {
 
     .profile-main-block {
         font-size: 80%;
     }
 
     .profile-details-block {
         padding-left: 15px!important;
     }
 
 }
 
 .discover-live-video, .discover-recent-video {
     border-radius: 4px;
     overflow: hidden;
     min-height: 200px;
     background-size: cover;
     background-position: center;
     padding-top: 56.25%;
     position: relative;
 }
 
 .discover-live-video img, .discover-recent-video img{
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
     left: 0;
 }
 
 .discover-video-poster:hover {
     background-color: var(--main-action-color);
     border-radius: 5px;
 }
 
 .discover-video-poster:hover div {
     opacity: 0.93;
 
 }
 
 .live-block {
     margin-top: 20px;
 }
 
 .discover-recent-video .video-js {
    height:auto;
 }
 
 img.discover-live-video {
     width: 100%;
 }
 
 .activity-third-party-video {
     overflow: hidden;
 }
 
 .activity-commit-video {
     cursor: pointer;
     overflow: hidden;
 }
 
 .explore-activity-video-block {
     margin-bottom: 60px;
 }
 
 .profile-activity-video-block {
     margin-bottom: 30px;
 }
 
 .commit-info-description {
     font-size: 80%;
     line-height: 150%;
     display: block;
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 .third-party-info-source {
     font-size: 90%;
     opacity: 0.8;
 }
 
 
 .repository-details {
     width: 300px;
 
 }
 
 .row-repository {
     display: flex;
     flex-wrap: wrap;
     margin: 20px;
     padding-bottom: 20px;
 }
 
 .row-third-party {
     display: flex;
     flex-wrap: wrap;
     margin: 0px 0px 20px 20px;
 }
 
 .row-commit {
     display: flex;
     flex-wrap: wrap;
     margin: 0px 0px 20px 20px;
 }
 
 .row-commit:hover, .row-third-party:hover {
     background-color: #f9f7fd;
 }
 
 .row-time {
     display: flex;
     flex-wrap: wrap;
 
     padding-bottom: 10px;
     font-weight: bold;
     /* margin-top: 40px;
     border-top: 1px solid var(--bg-stroke-color);
     padding-top: 35px; */
     margin-top: 20px;
 }
 
 .repository-info {
     margin-left: 20px;
 
     width: 40%;
     position: relative;
 }
 
 .commit-info-block {
     position: relative;
     margin-bottom: 40px;
     font-size: 90%;
     margin-top: 5px;
 }
 
 .coding-session-title {
 
 }
 
 .commit-info-timestamp {
 
 }
 
 .commit-info-first {
     flex: 1;
     min-width: 0;
     display: flex;
     align-items: flex-start;
     margin-bottom: 5px;
 }
 
 .commit-info-second {
     margin-top: -5px;
 }
 
 .commit-info-third {
     margin-top:0px;
 }
 
 .video-options-block {
     background-color: var(--secondary-bg-color);
     padding: 20px;
     border-radius: 10px;
     margin-bottom: 30px;
 }
 
 .commit-profile-block {
     padding-bottom: 40px;
     overflow-wrap: break-word;
     margin-top: 1rem;
 }
 
 .commit-profile-block .page-button-edit {
     position: relative;
     float: right;
 }
 
 .commit-profile-block-info {
     display: flex;
     font-size: 0.7rem;
     align-items: center;
     color: var(--secondary-type-color);
 }
 
 .project-block-info {
     display: flex;
     align-items: center;
 }
 
 .project-main-block {
     padding: 0;
     margin-bottom: 30px;
     border-bottom: 1px solid var(--bg-stroke-color);
     padding-bottom: 10px;
 }
 
 .commit-team-block-info {
     display: inline-flex;
     font-size: 0.65rem;
     align-items: center;
     color: var(--secondary-type-color);
     margin-bottom: 0.7rem;
 }
 
 .commit-info-first .coding-session-title {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 1.15rem;
     padding-right: 10px;
 }
 
 .commit-info-first h2 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.95rem;
 }
 
 .commit-info-id {
     margin-right: 5px;
 
 }
 
 .commit-grid {
     margin-left: 20px;
 }
 
 .commit-info-project {
     font-weight: bold;
     margin-right: 10px;
 
 }
 
 .commit-info-title {
     margin-right: 10px;
     display: block;
     margin-bottom: 0px;
     line-height: 140%;
 }
 
 .third-party-info-title {
     margin-right: 10px;
     display: block;
     margin-bottom: 0px;
     line-height: 140%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 
 
 .repository-block {
     border: 1px solid var(--bg-stroke-color);
     border-radius: 4px;
     padding: 20px;
     margin-bottom: 20px;
 }
 
 .repository-info-fork {
     font-size: 90%;
 }
 
 .repository-info-comment {
 
 }
 
 .repository-info-stats {
     font-size: 80%;
 
 }
 
 .tabs-profile {
     margin-left: 20px;
 }
 
 .tag-founding-member {
     border: 0px solid;
     display: inline-block;
     padding: 0px 5px 0px 5px;
     vertical-align: text-bottom;
     margin-right: 5px;
     font-size: 75%;
     border-radius: 2px;
     color: var(--white);
     background-color: #8a209d;
 }
 
 .tag-team {
     border: 0px solid;
     display: inline-block;
     padding: 0px 5px 0px 5px;
     vertical-align: text-bottom;
     margin-right: 5px;
     font-size: 75%;
     border-radius: 2px;
     color: var(--white);
     background-color: #3e8cbb;
 }
 
 /* Tags start */
 
 .tags-link {
     font-size: 300%;
 
 }
 
 .tags {
     border: 0px solid;
     display: inline-block;
     padding: 0px 5px 0px 0px;
     vertical-align: text-bottom;
     font-size: 75%;
     border-radius: 2px;
     color: var(--secondary-type-color);
     cursor: pointer;
 }
 
 .tags-selected span {
     text-transform: capitalize;
     margin-right: 5px;
 }
 
 .tags:hover {
     color: var(--main-action-color);
 }
 
 .tags-exclusive {
     font-size: 200%;
 }
 
 .tag-javascript {
     color: var(--white);
     background-color: #2979ff;
 }
 
 .tag-webdev {
     color: var(--dark);
     background-color: #ffa726;
 }
 
 .tag-react {
     color: var(--white);
     background-color: #5c6bc0;
 }
 
 .tag-reactnative {
     color: var(--white);
     background-color: #3f51b5;
 }
 
 .tag-python {
     color: var(--white);
     background-color: #795548;
 }
 
 .tag-tutorial {
     color: var(--dark);
     background-color: #e6ee9c;
 }
 
 .tag-node {
     color: var(--white);
     background-color: #2e7d32;
 }
 
 .tag-css {
     color: var(--dark);
     background-color: #f48fb1;
 }
 
 .tag-android {
     color: var(--white);
     background-color: #43a047;
 }
 
 .tag-opensource {
     color: var(--dark);
     background-color: #4db6ac;
 }
 
 .tag-angular {
     color: var(--dark);
     background-color: #e57373;
 }
 
 .tag-vue {
     color: var(--white);
     background-color: #1b5e20;
 }
 
 .tag-typescript {
     color: var(--white);
     background-color: #283593;
 }
 
 .tag-frontend {
     color: var(--white);
     background-color: #3e8cbb;
 }
 
 .tag-backend {
     color: var(--white);
     background-color: #6a1b9a;
 }
 
 .tag-frontend {
     color: var(--white);
     background-color: #ba68c8;
 }
 
 .tag-php {
     color: var(--white);
     background-color: #00acc1;
 }
 
 .tag-rubyonrails {
     color: var(--white);
     background-color: #7e57c2;
 }
 
 .tag-java {
     color: var(--white);
     background-color: #795548;
 }
 
 .tag-csharp {
     color: var(--white);
     background-color: #bf360c;
 }
 
 .tag-go {
     color: var(--dark);
     background-color: #1de9b6;
 }
 
 /* Tags end */
 
 .project-name {
     cursor: pointer;
     padding: 2px 6px;
     border-radius: 3px;
     font-weight: 600;
     display: inline-block;
     align-self: baseline;
     margin-right: 5px;
     text-align: center;
     white-space: nowrap;
     background-color: var(--third-bg-color);
 }
 
 .project-name:hover {
     background-color: var(--dark);
 }
 
 .project-color-1 {
     background-color: #2D7FF9;
 }
 
 .project-color-2 {
     background-color: #3f51b5;
 }
 
 .project-color-3 {
     background-color: #2e7d32;
 }
 
 .project-color-4 {
     background-color: #6a1b9a;
 }
 .project-color-5 {
     background-color: #e57373;
 }
 .project-color-6 {
     background-color: #f48fb1;
 }
 .project-color-7 {
     background-color: #ffa726;
 }
 .project-color-8 {
     background-color: #795548;
 }
 
 .project-color-9 {
     background-color: #8A46FF;
 }
 
 .profile-details-name {
     margin-top: 0px;
     margin-bottom: 5px;
     font-weight: 700;
     font-size: 1.23047rem;
 }
 
 .profile-details-username {
     color: var(--secondary-type-color);
 }
 
 .profile-details-description {
     white-space: pre-line;
 }
 
 .profile-details-web {
     color: inherit;
     display: inline-block;
     color: var(--secondary-type-color);
 }
 
 .profile-details-location {
     display: inline-block;
     color: var(--secondary-type-color);
 }
 
 .profile-details-block {
     padding-left: 30px!important;
     padding-right: 15px!important;
 }
 
 .stats-timestamp {
     margin-right: 20px;
 }
 
 .stats-fork {
     margin-right: 20px;
 }
 
 .stats-language {
     margin-right: 20px;
 }
 
 .stats-license {
     margin-right: 20px;
 }
 
 .profile-social-block {
     display: inline-block;
 }
 
 .profile-team-block {
     width: 100%;
     position: relative;
     color: var(--secondary-type-color);
 }
 
 .profile-team-members-block {
     border-bottom: 1px solid var(--bg-stroke-color);
     padding-bottom: 20px;
     margin-bottom: 30px;
     width: 100%;
     position: relative;
 }
 
 .profile-team-block p, .profile-team-members-block p {
     margin-top: -10px;
 }
 
 .page-button-edit {
     position: absolute;
     right: 0;
     top: 0;
     z-index: 100;
 }
 
 .social-icon {
     width: 16px;
     margin-right: 10px;
 }
 
 .profile-main-block .icon-color {
     fill: var(--secondary-type-color);
 }
 
 .icon-color {
     fill: var(--type-color);
 }
 
 .icon-control-video {
     width: 30px;
     height: 30px;
     margin: 4px;
 }
 
 .profile-social-link:hover .icon-color, .header-icon-link:hover .icon-color {
     fill: var(--main-action-color);
 }
 
 .profile-social-link:hover, .header-icon-link:hover {
     cursor: pointer;
 }
 
 
 .profile-social-link, .profile-icons {
     display: inline-block;
     margin-right: 10px;
     width: 15px;
     height: 15px;
     vertical-align: sub;
 }
 
 .profile-icons-small {
     display: inline-block;
     margin-right: 5px;
     width: 11px;
     height: 11px;
     vertical-align: top;
 }
 
 .header-icon-link {
     margin-bottom: -2px;
     display: inline-block;
     width: 20px;
     height: 20px;
 }
 
 .btn-icon-link {
     display: inline-block;
     width: 20px;
     height: 20px;
 }
 
 .btn-danger-secondary .btn-icon-link .icon-color {
     fill: var(--danger);
 }
 
 .btn-danger-secondary:active .btn-icon-link .icon-color {
     fill: var(--danger)!important;
 }
 
 .btn-danger-secondary:hover .btn-icon-link .icon-color {
     fill: var(--dark);
 }
 
 .btn-secondary .btn-icon-link .icon-color {
     fill: var(--main-action-color);
 }
 
 .btn-secondary:hover .btn-icon-link .icon-color {
     fill: var(--main-action-color);
 }
 
 
 .btn-main .btn-icon-link .icon-color {
     fill: var(--dark);
 }
 
 .btn-main:hover .btn-icon-link .icon-color {
     fill: var(--dark);
 }
 
 .btn-danger .btn-icon-link .icon-color {
     fill: var(--danger);
 }
 
 .btn-danger:hover .btn-icon-link .icon-color {
     fill: var(--dark);
 }
 
 .dropdown-usermenu-link .btn-icon-link .icon-color {
     fill: var(--secondary-type-color);
     opacity: 0.5;
 }
 
 .profile-video-live {
     float: right;
     top: 5px;
     position: absolute;
     right: 15px;
 }
 
 .big-live-status {
     border: 2px solid var(--red);
     border-radius: 1px!important;
     display: inline-block;
     padding-left: 16px!important;
     padding-right: 16px!important;
     color: white;
     background-color: var(--red);
     font-weight: bold;
     text-transform: uppercase;
     transition: all 0.8s;
     line-height: 1.9;
     cursor: initial!important;
 }
 
 .small-live-status {
     border: 2px solid var(--red);
     border-radius: 1px;
     display: inline-block;
     padding: 0px 10px 0px 10px;
     color: white;
     background-color: var(--red);
     font-weight: bold;
     margin-bottom: 10px;
     text-transform: uppercase;
     transition: all 0.8s;
     vertical-align: top;
 }
 
 .small-live-status:hover, .big-live-status:hover {
     color: white;
     background-color: var(--red);
 }
 
 .discover-recent-video {
     border-radius: 4px;
 }
 
 .discover-card-block {
     margin-bottom: 20px;
 
 }
 
 .discover-card-block:hover {
 
     cursor: pointer;
 }
 
 #typeform{
     margin-top: 20px;
     display: block;
     height: 500px;
     border-left: 1px solid #ccc;
 }
 
 @media (max-width: 767px) {
 
     #typeform{
 
         border-left: 0px solid #ccc;
     }
 
 }
 
 .people-block {
     display: flex;
     margin-bottom: 20px;
 }
 
 .people-avatar img {
     width: 60px;
     border-radius: 200px;
 }
 
 .people-info-permission {
     color: var(--secondary-type-color);
 }
 
 .people-info {
     display: flex;
 
     align-items: center;
     padding-left: 20px;
 }
 
 .people-info span{
     margin-right: 20px;
 }
 
 .upload-status-bar {
     height: 40px;
     background: var(--secondary-bg-color);
     width: 100%;
     margin-top: 2rem;
 }
 
 .upload-status-bar .completed {
     height: 40px;
     background: var(--main-action-color);
 }
 
 #offcanvas-right {
     z-index:2000!important;
 }
 
 
 /* admin sidebar  */
 
 #offcanvas-bottom {
     bottom: 0!important;
     top: unset!important;
 }
 
 .admin-sidebar {
     box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.8);
     width: 80%;
     height: 80%;
     z-index: 10000;
     border: 2px solid var(--dark);
     border-radius: 10px;
     overflow: hidden;
     background-color: var(--dark);
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     padding: 20px;
 
 }
 
 .modal-admin {
     background-color: #0000008c;
     width: 100%;
     height: 100%;
     z-index: 5000;
     overflow: hidden;
     position: fixed;
 
 }
 
 .modal-admin.show {
     visibility: visible!important;
     opacity: 1;
     -webkit-transform: translate(0, 0);
     transform: translate(0, 0);
 }
 
 .admin-sidebar-content {
     height: 100%;
     overflow-y: auto;
     padding-bottom: 30px;
     padding-top: 10px;
     margin-top: 15px;
 }
 
 .admin-sidebar .close {
     margin-top: -10px;
     left: 20px;
 }
 
 .admin-sidebar ~ nav .admin-hide {
     display: none;
 }
 
 .admin-sidebar ~ nav.navbar {
     padding-left: 0.4rem;
 }
 
 .admin-sidebar h1, .admin-sidebar h2, .admin-sidebar h3, .admin-sidebar h4, .admin-sidebar h5, .admin-sidebar h6 {
     color: var(--type-color);
 }
 
 .admin-sidebar h4 {
     margin-top: 0rem;
     margin-bottom: 3rem;
     border-bottom: 1px dashed;
     font-size: 1rem;
     color: var(--secondary-type-color);
 }
 
 .admin-sidebar h4::after {
     margin-bottom: 0px;
     border-bottom: 1px dashed;
     content: "";
     position: relative;
     width: 100%;
     bottom: 2px;
     height: 0px;
     display: block;
     margin-top: 4px;
 
 }
 
 .admin-sidebar select {
     border-radius: 0px;
     background-color: var(--main-action-color);
     border-color: var(--main-action-color);
     cursor: pointer;
 }
 
 .switch-input:checked ~ .switch-label::before {
     border-color: var(--main-action-color)!important;
 }
 
 .switch-input:checked ~ .switch-label::after {
     background: var(--main-action-color)!important
 }
 
 .admin-sidebar h5 {
     margin-top: 2rem;
     margin-bottom: 0rem;
     font-size: 0.8rem;
 }
 
 /* .admin-sidebar ~ .main-content, .admin-sidebar ~ nav, .admin-sidebar ~ footer {
     margin-right: 320px;
 } */
 
 .admin-sidebar hr {
     border-top-color: var(--main-action-color);
     margin: 4rem 0rem 1rem 0rem;
     border-top: 1px solid;
     border-bottom: 1px solid;
     padding-bottom: 2px;
     border-style: dashed;
 }
 
 .admin-sidebar a, .admin-sidebar button {
     border-top-color: var(--main-action-color);
     text-decoration: underline !important;
     transition: 0s;
     cursor: pointer;
     width: auto;
     display: inline-block;
     margin-bottom: 15px;
     color: var(--main-action-color);
     background: transparent;
     border: 0px;
     text-align: center;
 }
 
 .admin-sidebar a:hover, .admin-sidebar button:hover {
     background-color: var(--main-action-color);
     color: black !important;
     text-decoration: none; }
 
 
 .admin-sidebar button.btn-delete {
     border-top-color: var(--danger);
     text-decoration: underline !important;
     transition: 0s;
     cursor: pointer;
     width: auto;
     display: block;
     margin-bottom: 15px;
     color: var(--danger);
     background: transparent;
     border: 0px;
     text-align: center;
 }
 
 .admin-sidebar button.btn-delete:hover {
     background-color: var(--danger);
     color: black !important;
     text-decoration: none; }
 
 .admin-sidebar input.form-control, .admin-sidebar .form-control:focus, .admin-sidebar input {
     font-weight: initial;
     font-size: 0.8rem;
     background-color: transparent;
     border-top: 0px;
     border-right: 0px;
     border-bottom: 1px solid var(--type-color);
     border-left: 0px;
     width: 100%;
     display: block;
 }
 
 .admin-sidebar input.form-control, .admin-sidebar input  {
     color: var(--main-action-color)!important;
 }
 
 
 .admin-sidebar input::placeholder, .admin-sidebar textarea::placeholder {
     color: var(--main-action-color)!important;
 
 }
 
 .admin-sidebar input:focus, .admin-sidebar textarea:focus {
     outline: none !important;
     border-top: 0px solid red;
     border-bottom: 1px solid var(--main-action-color);
     box-shadow: 0 0 0;
     background-color: var(--main-action-color);
 }
 
 .admin-sidebar textarea:focus {
     outline: none !important;
     border: 1px solid var(--main-action-color);
     box-shadow: 0 0 0;
     background-color: var(--main-action-color);
 }
 
 .admin-sidebar input:focus::placeholder,
 .admin-sidebar textarea:focus::placeholder,
 .admin-sidebar .form-control:focus,
 .admin-sidebar input:focus,
 .admin-sidebar textarea:focus {
     color: black!important;
 }
 
 .admin-sidebar textarea {
     font-weight: initial;
     color: var(--main-action-color)!important;
     background-color: transparent;
     border: 1px solid var(--type-color);
     width: 100%;
     display: block;
     font-size: 0.8rem;
 }
 
 .admin-sidebar input[type="radio"] {
     display: inline-block;
     width: initial;
     margin-left: 2px;
     margin-right: 4px;
 }
 
 .admin-sidebar .custom-radio label {
     font-size: inherit;
 }
 
 .admin-sidebar .custom-radio label:hover {
     background-color: var(--main-action-color);
     color: var(--dark);
     cursor: pointer;
 }
 
 
 
 @media only screen and (max-width: 320px)  {
     /* smartphones, iPhone, portrait 480x320 phones */
     /* .admin-sidebar ~ .main-content, .admin-sidebar ~ .footer {
         display: none;
     }
 
     .admin-sidebar ~ nav {
         margin-right: calc(100% - 60px);
     }
 
     .admin-sidebar {
         width: calc(100% - 60px);
     }
 
     .admin-sidebar ~ .main-content, .admin-sidebar ~ .footer {
         display: none;
     }
 
     .admin-sidebar ~ nav .admin-mobile-hide {
         display: none;
     } */
 
     /* .admin-sidebar ~ nav .header-icon-link {
         position: fixed;
         right: 80px;
         top: 20px;
     }
     .admin-sidebar ~ nav {
         margin-right: 100%;
     } */
 }
 @media only screen and (min-width: 321px) and (max-width: 480px)  {
     /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
     /* .admin-sidebar ~ .main-content, .admin-sidebar ~ .footer {
         display: none;
     }
     .admin-sidebar ~ nav {
         margin-right: calc(100% - 60px);
     }
 
     .admin-sidebar {
         width: calc(100% - 60px);
     }
 
     .admin-sidebar ~ .main-content, .admin-sidebar ~ .footer {
         display: none;
     }
 
     .admin-sidebar ~ nav .admin-mobile-hide {
         display: none;
     } */
 
     /* .admin-sidebar ~ nav .header-icon-link {
         position: fixed;
         right: 80px;
         top: 20px;
     }
     .admin-sidebar ~ nav {
         margin-right: 100%;
     } */
 }
 
 @media only screen and (min-width: 481px) and (max-width: 960px)  {
     /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
 
     /* .admin-sidebar ~ .footer {
         display: none;
     }
 
     .admin-sidebar ~ nav {
         margin-right: calc(100% - 60px);
     }
 
     .admin-sidebar {
         width: calc(100% - 60px);
     }
 
     .admin-sidebar ~ .main-content, .admin-sidebar ~ .footer {
         display: none;
     }
 
     .admin-sidebar ~ nav .admin-mobile-hide {
         display: none;
     } */
 }
 
 @media only screen and (min-width: 961px) and (max-width: 1024px)  {
     /* tablet, landscape iPad, lo-res laptops ands desktops */
 
 }
 
 @media only screen and (min-width: 1025px) and (max-width: 1280px)  {
     /* big landscape tablets, laptops, and desktops */
 
 }
 
 @media only screen and (min-width: 1281px)  {
     /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
 
 }
 
 .admin-bottom {
     position: absolute;
     bottom: 0;
     width: 100%;
 }
 
 .admin-sidebar .custom-control {
     display: flex;
     align-items: center;
 }
 
 .admin-sidebar .custom-control span  {
     font-size: 80%;
     line-height: 100%;
     display: inline-flex;
 }
 
 
 /* End admin */
 
 
 .language-tag {
     border: 0px solid;
     border-radius: 1px;
     display: inline-block;
     padding: 0px 5px 0px 5px;
     vertical-align: top;
     margin-right: 5px;
     font-size: 70%;
     border-radius: 2px;
     background-color: var(--dark);
 }
 
 
 .empty-video-block {
     margin-top:20px;
 }
 
 .empty-video {
     background-color:  var(--dark);
     height: 200px;
     margin-bottom: 40px;
     border-radius: 4px;
     opacity: 0.5;
 }
 
 .empty-video-row2 {
     opacity: 0.4;
 }
 
 .empty-video-row3 {
     opacity: 0.2;
 }
 
 .video-block-day {
     border-bottom: 1px solid var(--bg-stroke-color);
 }
 
 .onboarding-main {
     overflow-x: hidden;
 }
 
 .highlight-text-secondary {
     border: 1px solid var(--gray-dark);
     padding: 2px 5px;
     border-radius: 4px;
     background-color: var(--gray);
     color: var(--dark);
 }
 
 .highlight-text {
     border: 1px solid var(--third-bg-color);
     padding: 2px 5px;
     border-radius: 4px;
     background-color: var(--third-bg-color);
 }
 
 .intructions-block {
     margin-bottom: 80px;
 }
 
 .nav-link {
     font-size: 85%;
 }
 
 .nav-bar .nav-link {
     word-spacing: normal;
 }
 
 .nav-link:hover {
     color: var(--main-action-color);
 }
 
 .bg-red {
     background-color: red;
 }
 
 .bg-blue {
     background-color: blue;
 }
 
 .bg-green {
     background-color: green;
 }
 
 .small-toggler {
     font-size: initial!important;
     display: flex;
 }
 
 .explore-title {
     margin-top: 50px;
     margin-bottom: 20px;
 }
 
 .explore-title h1 {
     font-size: 1.3rem;
 }
 
 .btn {
     transition: none!important;
 }
 
 .secondary-text-link {
     color: var(--secondary-type-color)!important;
     cursor: pointer;
     display: block;
 }
 
 .twitter-button {
     align-self: center;
     display: inline-block;
 }
 
 .twitter-button div {
     display: flex;
 }
 
 .share-button-small {
     cursor: pointer;
     padding: 2px 6px;
     border-radius: 3px;
     display: inline-block;
     font-weight: 600;
     display: inline-flex;
     align-self: baseline;
     font-size: 80%;
 }
 
 .share-bg {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 8000;
     background-color: #000000ad;
     display: block;
     width: 100%;
     height: 100%;
 }
 
 .share-box {
     background-color: var(--bg-color);
     border-radius: 10px;
     padding: 50px 20px 50px 20px;
     min-width: 500px;
     height: auto;
     position: fixed;
     z-index: 9000;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     font-size: initial;
     width: 60%;
 }
 
 .share-box textarea {
     width: 90%;
     font-size: 80%;
     border-radius: 3px;
     color: var(--bg-color);
 }
 
 .share-box .close {
     float: right;
     font-size: 1.40625rem;
     font-weight: 600;
     line-height: 1;
     color: var(--type-color);
     text-shadow: none;
     opacity: .5;
     position: absolute;
     top: 10px;
     right: 10px;
 }
 
 .join-gitduck {
     background-color: var(--dark);
     padding: 40px 0 40px 0;
     border-radius: 10px;
     width: 90%!important;
 }
 
 .join-gitduck .section-header {
     margin: 0 auto 30px;
 }
 
 .join-gitduck h3 {
     font-size: 1.3rem;
 }
 
 .join-gitduck p {
     font-size: 0.85rem;
 }
 
 .join-conversation {
     background-color: var(--third-bg-color);
     box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.34);
     width: 100%;
     height: 100px;
 }
 
 .join-conversation-footer {
     font-size: 0.75rem;
     width: 100%;
     margin-top: -25px;
 }
 
 .modal-bg {
     background-color: #0000008c;
     width: 100%;
     height: 100%;
     position: fixed;
 }
 
 .modal-bg:hover {
     background-color: #0000006c;
     transition: all 0.5s;
     cursor: pointer;
 }
 
 .text-description {
     text-align: left;
     overflow-wrap: normal;
     white-space: pre-wrap;
     flex-direction: row;
     margin-top: 30px;
 }
 
 .dropdown-usermenu {
     background-color: var(--dark);
     padding: 20px 30px;
     position: absolute;
     right: 10px;
     top: 80px;
     font-size: 85%;
     border-radius: 6px;
     min-width: 240px;
 }
 
 .dropdown-usermenu-link {
     color: var(--type-color);
     margin-bottom: 4px;
     cursor: pointer;
     display: inline-flex;
 }
 
 .dropdown-usermenu-link:hover {
     color: var(--main-action-color);
 }
 
 .dropdown-usermenu hr {
     border-color: var(--secondary-bg-color)!important;
     margin: 1rem 0rem 1rem 0rem;
     border-top: 1px solid;
     border-bottom: 0px solid;
 }
 
 .chat-notify-badge-inline {
     background-color: var(--red);
     border-radius: 50%;
     padding: 4px 0px;
     height: 16px;
     width: 16px;
     color: var(--dark);
     text-align: center;
     line-height: 90%;
     display: inline-block;
     font-size: 60%;
     margin-left: 2px;
     top: -2px;
     position: relative;
 }
 
 .text-link {
     color: inherit;
 }
 
 .hide-content {
     display: none;
 }
 
 .showContent {
     display: block;
 }
 
 .tab-control-center {
     justify-content: center;
     display: flex;
 }
 
 .outline-pills .nav-pills .nav-link {
     border-bottom: 1px solid var(--secondary-type-color);
     color: var(--secondary-type-color)!important;
 }
 
 .outline-pills .nav-pills .nav-link:hover, .outline-pills .nav-pills .nav-link.active {
     border-bottom: 1px solid var(--secondary-type-color);
     background-color: var(--secondary-type-color);
     color: var(--dark)!important;
 }
 
 .box-block {
     background-color: var(--secondary-bg-color);
     padding: 20px;
     border-radius: 10px;
 }
 
 .survey-form select {
     width: 100%;
 }
 
 .photo {
     border-radius: 20px;
 }
 
 .permissions-instructions-block {
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 9999;
 }
 
 .permissions-instructions-bg {
     background-color: #000000db;
     width: 100%;
     height: 100%;
     position: fixed;
 }
 
 .bottom-instructions-content {
     z-index: 10000;
     overflow: hidden;
     position: fixed;
     bottom: 30px;
     transform: translate(-50%);
     vertical-align: bottom;
     left: 50%;
     font-size: 170%;
     width: 90%;
     text-align: center;
 }
 
 .center-instructions-content {
     z-index: 10000;
     overflow: hidden;
     position: fixed;
     top: 50%;
     transform: translate(-50%, -50%);
     vertical-align: bottom;
     left: 50%;
     font-size: 170%;
     width: 90%;
     text-align: center;
 }
 
 .box-modal {
     background-color: var(--dark);
     padding: 20px;
     border-radius: 20px;
     width: 80%;
 }
 
 .price-time {
     color: var(--secondary-type-color);
     font-size: small;
     line-height: 1rem;
     display: block;
     margin-top: -10px;
 }
 
 .invisible {
     color: transparent;
 }
 
 /* Make clicks pass-through */
 #nprogress {
     pointer-events: none;
 }
 
 #nprogress .bar {
     background: var(--main-action-color);
 
     position: fixed;
     z-index: 1031;
     top: 0;
     left: 0;
 
     width: 100%;
     height: 2px;
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
     display: block;
     position: absolute;
     right: 0px;
     width: 100px;
     height: 100%;
     box-shadow: 0 0 10px #29d, 0 0 5px #29d;
     opacity: 1;
 
     -webkit-transform: rotate(3deg) translate(0px, -4px);
     -ms-transform: rotate(3deg) translate(0px, -4px);
     transform: rotate(3deg) translate(0px, -4px);
 }
 
 
 .onboarding-arrow {
     position: absolute;
     right: 210px;
     top: 100px;
     width: 16%;
 }
 
 
 .custom-radio label {
     cursor: pointer;
 }
 
 .teams-page {
     min-height: 500px;
     height: 100%;
 }
 
 
 
 .cookie-message a {
     line-height: 10px;
-}
-
-::selection {
-    background: #ffb7b7; /* WebKit/Blink Browsers */
-  }
-::-moz-selection {
-    background: #ffb7b7; /* Gecko Browsers */
 }
\ No newline at end of file
diff --git a/web/components/Settings/OwnVideoSettings.js b/web/components/Settings/OwnVideoSettings.js
index 622be60..f26874b 100644
--- a/web/components/Settings/OwnVideoSettings.js
+++ b/web/components/Settings/OwnVideoSettings.js
@@ -1,133 +1,133 @@
 import React, { Component, Fragment } from 'react'
 import { logout } from '../../services/auth'
 import _ from 'lodash'
 import { updateCodingSessionMetadata, deleteCodingSession } from '../../services/api'
 import { setCodingSessionMetadata } from '../../actions'
 import { connect } from 'react-redux'
 import redirect from '../../services/redirect'
 import withSettingsPortal from './withSettingsPortal'
 import Link from 'next/link'
 
 const Visibility = ({visibility = 'public', isTeam, teamName, onChange}) => {
   const isCheckedPublic = visibility === 'public'
   const isCheckedTeam = visibility === 'team'
   const isCheckedPrivate = visibility === 'private'
 
   return <Fragment>
     <h5>Who can watch?</h5>
     <div className="custom-controls-stacked">
       <div>
         {isTeam && <div className="custom-control custom-radio">
           <label>
             <input name="visibility" type="radio" value="team" checked={isCheckedTeam}
                    onChange={() => onChange('team')}/>
             <span className="ml-1">Team (only team can watch)</span>
           </label>
         </div>}
         <div className="custom-control custom-radio">
           <label>
             <input name="visibility" type="radio" value="public" checked={isCheckedPublic}
                    onChange={() => onChange('public')}/>
             <span className="ml-1">Public (anyone)</span>
           </label>
         </div>
         <div className="custom-control custom-radio">
           <label>
             <input name="visibility" type="radio" value="private" checked={isCheckedPrivate}
                    onChange={() => onChange('private')}/>
             <span className="ml-1">Private (only you)</span>
           </label>
         </div>
       </div>
     </div>
   </Fragment>
 }
 
 const Indexing = () => <Fragment>
   <h5>Indexing</h5>
   <div className="switch">
     <input type="checkbox" className="switch-input" checked/>
     <label className="switch-label">Allow search engines</label>
   </div>
 </Fragment>
 
 class OwnVideoSettings extends Component {
   state = {
     formFields: {
       title: _.get(this.props.codingSession, 'title', ''),
       description: _.get(this.props.codingSession, 'description', ''),
       visibility: _.get(this.props.codingSession, 'visibility', 'public'),
     }
   }
 
   onSubmitForm = async e => {
     e.preventDefault()
     const {formFields} = this.state
     const sessionId = _.get(this.props.codingSession, '_id')
     await updateCodingSessionMetadata(sessionId, formFields)
     this.props.setCodingSessionMetadata({
       id: sessionId,
       ...formFields,
     })
   }
 
   updateFormField = (key, value) => {
     this.setState({
       formFields: {
         ...this.state.formFields,
         [key]: value
       }
     })
   }
 
   deleteVideo = async () => {
     const confirmation = confirm('Are you sure you want to permanently delete this video?')
     if (!confirmation) {
       return
     }
 
     const sessionId = _.get(this.props.codingSession, '_id')
     await deleteCodingSession(sessionId)
     redirect(null, `/${this.props.currentUser.username}`)
   }
 
   render () {
     const {title, description, visibility} = this.state.formFields
     const {organizationId} = this.props.codingSession
     const onUpdateTitle = e => this.updateFormField('title', e.target.value)
     const onUpdateDescription = e => this.updateFormField('description', e.target.value)
     const onUpdateVisibility = visibility => this.updateFormField('visibility', visibility)
 
     return <form onSubmit={this.onSubmitForm}>
       <h4>Edit your coding session</h4>
 
       <Visibility visibility={visibility} isTeam={!!organizationId} onChange={onUpdateVisibility}/>
 
       <h5>Title</h5>
       <input type="text" placeholder="What are you working on?"
              value={title} onChange={onUpdateTitle}/>
 
 
       <h5>Description <span className="float-right"><Link href="../markdown-cheatsheet"><a target="_blank">Markdown Cheatsheet</a></Link></span></h5>
-      <textarea rows="8" type="textarea" placeholder="Tell more about it... you can also use markdown here."
+      <textarea rows="8" type="textarea" placeholder="Tell more about this coding video... you can also use markdown here."
                 value={description} onChange={onUpdateDescription}/>
 
 
       <button type="submit">Save changes</button>
       <hr/>
       <button className="btn-delete" onClick={this.deleteVideo}>Delete video</button>
       <hr/>
       <button onClick={logout}>Logout from GitDuck</button>
     </form>
   }
 }
 
 const mapActions = {
   setCodingSessionMetadata,
 }
 
 const mapState = ({currentUser}) => ({
   currentUser: currentUser.user,
 })
 
 export default connect(mapState, mapActions)(withSettingsPortal(OwnVideoSettings))
diff --git a/web/pages/new-video.js b/web/pages/new-video.js
index d9c3817..128dd01 100644
--- a/web/pages/new-video.js
+++ b/web/pages/new-video.js
@@ -1,163 +1,157 @@
 import React, { Component } from 'react'
 import Page from '../components/Page'
 import Header from '../components/Header'
 import withProtectedPage from '../services/auth/withProtectedPage'
 import { connect } from 'react-redux'
 import dynamic from 'next/dynamic'
 import cn from 'classnames'
 import Link from 'next/link'
 import withFetchUsernameIfNeededPage from '../services/withFetchUsernameIfNeededPage'
 import { fetchCurrentOrganizationsIfNeeded } from '../actions'
 
 const CodingSessionDescription = dynamic(() => import('../components/CodingSession/CodingSessionDescription'))
 
 const activeTabs = {
   video: 'video',
   code: 'code',
   comments: 'comments',
 }
 
 const getDefaultTitle = (date = new Date()) => {
   const nth = n => ['st', 'nd', 'rd'][(((n < 0 ? -n : n) + 90) % 100 - 10) % 10 - 1] || 'th'
 
   const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
   const month = months[date.getMonth()]
   const day = date.getDate() + nth(date.getDate())
   const formattedDate = `${month} ${day}`
   return `Coding session on ${formattedDate}`
 }
 
 class NewVideo extends Component {
   state = {
     activeTab: activeTabs.video,
     visibility: 'public',
     title: getDefaultTitle(),
     description: '',
     organizationId: 'none',
   }
 
   setNewCodingSessionMetadata = ({title, visibility, description, organizationId}) => {
     const newVisibility = this.state.visibility === 'team' && organizationId === 'none' ? 'public' : visibility
     this.setState({
       ...(title && {title}),
       ...(newVisibility && {visibility: newVisibility}),
       ...(description && {description}),
       ...(organizationId && {organizationId}),
     })
   }
 
   componentDidMount () {
     const {fetchCurrentOrganizationsIfNeeded} = this.props
 
     fetchCurrentOrganizationsIfNeeded()
       .then(currentOrganizations => {
         const organizationId = currentOrganizations.map(org => org.id).find(id => id === localStorage.getItem('newVideoOrgId')) || 'none'
         const visibility = ['public', 'team', 'private'].find(v => v === localStorage.getItem('newVideoVisibility')) || 'public'
         this.setState({
           organizationId: organizationId,
           visibility: organizationId === 'none' && visibility === 'team' ? 'public' : visibility,
         })
       })
       .catch(console.error)
   }
 
   onClickStartRecording = () => {
 
   }
 
   onClickStopRecording = () => {
 
   }
 
   render () {
     const {currentUser, currentOrganizations} = this.props
     const {activeTab, visibility, title, description, organizationId} = this.state
     const {setNewCodingSessionMetadata, onClickStartRecording, onClickStopRecording, onUpdateOrganization} = this
 
     const isVideoSelected = activeTab === activeTabs.video
     const isCodeSelected = activeTab === activeTabs.code
     const isCommentsSelected = activeTab === activeTabs.comments
 
     return <Page>
       <Header/>
       <div className="main-content mobile-hide">
         <div className="space-block"/>
         <div className="mobileTabControl">
-          <ul className="nav nav-pills mb-3" id="pills-tab" role="tablist">
+          <ul className="nav nav-pills" id="pills-tab" role="tablist">
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.video})}
                  className={cn('nav-link', {active: isVideoSelected})} id="pills-profile-tab" data-toggle="pill"
                  role="tab"
                  aria-controls="pills-profile" aria-selected={isVideoSelected}>Video</a>
             </li>
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.code})}
                  className={cn('nav-link', {active: isCodeSelected})} id="pills-profile-tab" data-toggle="pill"
                  role="tab"
                  aria-controls="pills-profile" aria-selected={isCodeSelected}>Code</a>
             </li>
             <li className="nav-item">
               <a onClick={() => this.setState({activeTab: activeTabs.comments})}
                  className={cn('nav-link', {active: isCommentsSelected})} id="pills-contact-tab" data-toggle="pill"
                  role="tab" aria-controls="pills-contact" aria-selected={isCommentsSelected}>Chat</a>
             </li>
           </ul>
         </div>
 
         <div className="container-fluid mobile-hide">
             <div className="row">
-              <div className="col"><h1 className="lead-3">New video</h1></div>
-            </div>
-            <div className="row">
-              <div className="col-12 col-md-6 col-lg-8">
-                <div className="video-options-block mb-0">Install the VS Code extension if you want to link your code automatically to the video.<br/>
-                <Link href="/instructions/vscode"><button className="btn btn-md btn-secondary-outline mt-3"
-                                                    type="button">How to install the IDE extension</button></Link></div>
-              </div>
+              <div className="col-12 col-lg-10 mx-auto"><h1 className="lead-3">Record a new video</h1></div>
             </div>
+            
         </div>
         <div className={cn('mobileTab', {showTab: isVideoSelected})}>
-          <CodingSessionDescription isEmbed={false} isCommentsSelected={isCommentsSelected}
+          <CodingSessionDescription isNewVideo={true} isEmbed={false} isCommentsSelected={isCommentsSelected}
                                     hideShareBox={true} visibility={visibility} description={description}
                                     title={title} isOwnCodingSession={true} user={currentUser}
                                     onUpdateTitle={title => setNewCodingSessionMetadata({title})}
                                     onUpdateDescription={description => setNewCodingSessionMetadata({description})}
                                     onUpdateVisibility={visibility => setNewCodingSessionMetadata({visibility})}
                                     onUpdateOrganization={organizationId => setNewCodingSessionMetadata({organizationId})}
                                     hideDeleteButton={true} isLive={false} onClickStartRecording={onClickStartRecording}
                                     onClickStopRecording={onClickStopRecording} organizations={currentOrganizations}
                                     organizationId={organizationId} showStreamFromBrowser={true}
           />
         </div>
 
 
         <div className="space-block"/>
       </div>
       <div className="main-content mobile-show  ">
         <div className="space-block"/>
           <div className="row force-90vh align-items-center text-center">
             <div className="col-10 mx-auto">
               <div className="alert alert-info" role="alert">
                 <p className="lead-3 text-center">Please try with a computer</p>
                 <p className="text-center mt-4">
                   In order to record your screen with GitDuck, you need to be using the Chrome browser in a desktop computer.
                 </p>
               </div>
             </div>
           </div>
         <div className="space-block"/>
       </div>
     </Page>
   }
 }
 
 const mapState = ({currentUser}) => ({
   currentUser: currentUser.user,
   currentOrganizations: currentUser.organizations,
 })
 
 const mapActions = {
   fetchCurrentOrganizationsIfNeeded: fetchCurrentOrganizationsIfNeeded
 }
 
 export default withProtectedPage({noAuthRedirect: '/'})(withFetchUsernameIfNeededPage(connect(mapState, mapActions)(NewVideo)))
</article></body></html>

UX improvements to the New Video screen

More coding videos

Coding session on August 13th

[Global chat] Part1: UI for chat with unread messages

drag0s please review Bug solved: Sidemenu conflict with mobileTabControl

Request permissions box

GitDuck update - December 12th

Coding session on August 21st