<commit_before>// @flow
import * as React from 'react'
import {DropTarget} from 'react-dnd'
import {connect} from 'react-redux'
import styled, {css} from 'styled-components'
import * as theme from '../theme'
import {IDENT_COURSE} from '@gob/object-student'
import {Icon} from './icon'
import {iosTrashOutline} from '../icons/ionicons'
import {removeCourse} from '../redux/students/actions/courses'

const Box: any = styled.div`
	padding: 5em 1em;
	color: ${theme.gray500};
	background-color: white;
	border-radius: 5px;

	position: fixed;
	top: calc(${theme.pageEdgePadding} * 2);
	left: calc(${theme.pageEdgePadding} * 2);
	max-width: 240px;

	display: none;
	box-shadow: 0 0 10px #444;

	${props =>
		props.canDrop &&
		css`
			color: black;
			display: flex;
			z-index: ${theme.zSidebar + 1};
		`};

	${props =>
		props.isOver &&
		css`
			box-shadow: 0 0 10px ${theme.red900};
			color: ${theme.red900};
			background-color: ${theme.red50};
		`};
`

type Props = {
	canDrop: boolean, // react-dnd
	connectDropTarget: (React.Element<*>) => any, // react-dnd
	isOver: boolean, // react-dnd
	studentId: string,
	removeCourse: (string, string, number) => any, // redux
}

function CourseRemovalBox(props: Props) {
	return (
		<Box
			ref={(ref: any) => props.connectDropTarget(ref)}
			isOver={props.isOver}
			canDrop={props.canDrop}
		>
			<Icon block style={{fontSize: '3em', textAlign: 'center'}}>
				{iosTrashOutline}
			</Icon>
			Drop a course here to remove it.
		</Box><commit_msg>use css vars in courseRemovalBox<commit_after>// @flow
import * as React from 'react'
import {DropTarget} from 'react-dnd'
import {connect} from 'react-redux'
import styled, {css} from 'styled-components'
import {IDENT_COURSE} from '@gob/object-student'
import {Icon} from './icon'
import {iosTrashOutline} from '../icons/ionicons'
import {removeCourse} from '../redux/students/actions/courses'

const Box = styled.div`
	padding: 5em 1em;
	color: var(--gray-500);
	background-color: white;
	border-radius: 5px;

	position: fixed;
	top: calc(var(--page-edge-padding) * 2);
	left: calc(var(--page-edge-padding) * 2);
	max-width: 240px;

	display: none;
	box-shadow: 0 0 10px #444;

	${props =>
		props.canDrop &&
		css`
			color: black;
			display: flex;
			z-index: calc(var(--z-sidebar) + 1);
		`};

	${props =>
		props.isOver &&
		css`
			box-shadow: 0 0 10px var(--red-900);
			color: var(--red-900);
			background-color: var(--red-50);
		`};
`

type Props = {
	canDrop: boolean, // react-dnd
	connectDropTarget: (React.Element<*>) => any, // react-dnd
	isOver: boolean, // react-dnd
	studentId: string,
	removeCourse: (string, string, number) => any, // redux
}

function CourseRemovalBox(props: Props) {
	return (
		<Box
			ref={(ref: any) => props.connectDropTarget(ref)}
			isOver={props.isOver}
			canDrop={props.canDrop}
		>
			<Icon block style={{fontSize: '3em', textAlign: 'center'}}>
				{iosTrashOutline}
			</Icon>
			Drop a course here to remove it.
		</Box>
{'fraction_non_alphanumeric': 0.17065767284991568, 'fraction_numerical': 0.021585160202360877, 'mean_word_length': 3.791599353796446, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4662415', 'n_tokens_mistral': 1229, 'n_tokens_neox': 1096, 'n_words': 275}